2021-02-23——九种跨域方案详解

同源策略

协议 域名 端口号 都一致表示：同域

为什么浏览器不支持跨域

cookie LocalStorage 不支持跨域（服务器返回的用户ip、状态标识问题）
DOM元素也有同源策略 iframe（页面嵌套的信息安全问题）
ajax 也不支持跨域（接口对外暴露的问题）

实现跨域

• jsonp
• cors （后端手段）
• postMessage
• document.domain
• window.name
• location.hash
• http-proxy
• nginx
• websocket

1、jsop

jsop是最好理解的一种手段：
比如：

为资源加载模式，不受同源策略影响
利用script，请求回调函数，运行函数拿到返回值的方法

 jquery.ajax({
    url: "http://www.jialianw.com/api/News_GetList.ashx?count=2",
    dataType: "jsonp",
    jsonp: 'callback',
    jsonpCallback:'newsList_jsonpCallback',
    success:(res) => {
        // console.log(res.DATA)
        this.newsList = res.DATA
    }
})

注意：
1.只能发送get请求 不支持post put delete
2.不安全 xss攻击（外部恶意脚本写入）

2、cors（后端操作，现在最常用的，安全性可靠）

后台添加域名白名单：

image.png

image.png

image.png

3、postMessage

主要解决 iframe 嵌套页面之间的通讯问题