美文网首页
跨域问题

跨域问题

作者: 肥羊猪 | 来源:发表于2021-03-23 20:20 被阅读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://(加密)作为协议前缀,不实行同源政策,只要服务器支持,就可以通过它进行跨源通信。

    相关文章

      网友评论

          本文标题:跨域问题

          本文链接:https://www.haomeiwen.com/subject/mztzcltx.html