跨域问题

2021-03-23  本文已影响0人  肥羊猪

浏览器的同源策略限制引起的跨域问题 同一协议、同一域名、同一端口
同源策略的限制范围

`cookie、localstorage、indexdb`无法读取。
`DOM`无法获取。
`ajax`请求不能发送。

“跨域资源共享” 简称 “CORS
cors通过响应头中指定的源头与当前源点相匹配来实现跨域

简单请求:`Access-Control-Allow-Origin`
Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: FooBar
Content-Type: text/html; charset=utf-8

非简单请求:PUT或DELETE,或者Content-Type字段的类型是application/json
"预检"请求(preflight)
`Access-Control-Request-Method`
`Access-Control-Request-Headers `

JSONP 只支持 GET请求,显然是没有CORS模块强大的。 JSONP的优势在于支持老式的浏览器,以及可以向比支持CORS的网站请求数据。

利用页面中的`脚本标记` <script>的加载来实现跨域请求
function showJsonp(obj){
  console.log(obj.message);
}
var url = 'http://127.0.0.1:8787/?func=showJsonp'
var script = document.createElement('script');
script.setAttribute('src',url);
script.setAttribute('type','text/javascript');
document.getElementsByTagName('head')[0].appendChild(script);

Nginx代理服务器配置跨域

{
    "/api": {
        "target": "http://ss.sss.cn/",
        "secure": false,
        "logLevel": "debug",
        "changeOrigin": true,
        "pathRewrite": {
            "^/api": "/api"
        }
    }
}

WebSocket:是一种长连接的通信协议。使用ws://(非加密)和wss://(加密)作为协议前缀,不实行同源政策,只要服务器支持,就可以通过它进行跨源通信。

上一篇下一篇

猜你喜欢

热点阅读