【计算机网络-18】同源策略

一、同源策略

1、定义

• 禁止一个源(origin)的脚本和文档和另一个源的脚本和文档交互
  • 两个URL的protocol、port和host相同，那么同源
  • 思考：如何两个源产生过多交互会有什么问题？

 

2、思考

• 为什么不禁用不同源的js？
• 应不应该允许不同源的js修改dom？
• 应不应该允许不同源的js获取远程图片内容？
• 应不应该允许网站提交数据导不同源的服务器？
• 应不应该允许网站提交cookie到不同源的服务器？

3、Jsonp

4、跨域资源共用(CORS)

• 跨域资源共用(Cross-Origin Resource Sharing)使用额外HTTP头允许指定的源和另一个源进行交互 

 

5、预检

 

6、代理

• 利用代理将不同源的资源代理到同源的资源

 

 二、服务器配置和解决跨域问题

1、Nginx跨域配置

这里简单粗暴了点：允许请求地址跨域 * 做为通配符，可以根据具体需要跨域的域名配置。

与前端配置请求头一一对应，特别是一些自定义的请求头

Access-Control-Allow-Headers 自定义请求头参数

Authorization、Request-Start、Accept-Language 

    server {
       ......
       
       location / {
           # 允许请求地址跨域 * 做为通配符
           add_header Access-Control-Allow-Origin *;
           # 设置请求方法跨域
           add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS, PUT, DELETE';
           # 设置请求头 这里为什么不设置通配符 * 因为不支持
           add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,tenantCode,Request-Start,Accept-Language';
           # 设置是否允许 cookie 传输
           add_header Access-Control-Allow-Credentials true;

           # 设置 options 请求处理
           if ($request_method = 'OPTIONS') {
               return 204;
           }

           proxy_pass http://looksky_compass_api_upstream;
       }
       
       ......
   }

 2、Nginx与Gateway代码中设置的跨域配置冲突

报错信息

The ‘Access-Control-Allow-Origin‘ header contains multiple values‘*, *‘, but only one is allowed.

Access-Control-Allow-Origin 代码中的跨域设置和Nginx的配置两者保持其中一个