什么是同源策略以及跨源资源共享（CORS）？

同源策略，是浏览器的一种安全机制，通过限制文档和脚本与来自另一个源的资源的交互。 从而隔离潜在的有害文档，保护用户的安全和隐私。同源指的是同协议/主机/端口相同。

例如A.com的前端页面只能访问A.com的后端服务器， 若B.com的前端页面访问A.com的后端服务器，那么就有可能被拦截。

localhost与127.0.0.1不属于同源，因为域名不同，算跨域。 他们的关系是通过操作系统中的hosts文件，将localhost解析为127.0.0.1，但它们算跨域。

跨源资源共享是用于在不同的源中获取资源的一种机制。解决跨域问题的方案：

• jsonp（json+padding，填充式的json）：Js跨域请求ajax数据是不可以的，但是js跨域请求js脚本是可以的（不然CDN之类的就没法用了）。 <src>、<link>、<img>自带跨域属性， JSONP原理就是动态插入带有跨域url（url参数有一个callback）的script标签，请求完script后， script内的内容会调用callback函数，服务器的数据就在这callback的入参内。 缺点是只能进行get请求，容易被csrf攻击（任何网页都能构造该jsonp，防御方法跟csrf相同），优点是兼容性好（就连IE也完美支持）。

<script>
function callback(data) {...}
</script>
<script src='https://xxx.com/getInfo?callback=callback'></script>
<!-- 上面👆标签解析后会变成如下👇，其中data是后端传过来的数据 -->
<script>callback(data)</script>

• nginx反向代理：nginx服务器的域名设置成为前端域名，nginx代理请求真正后端就不存在跨域问题了。

# nginx.config
server {
    server_name  前端域名
    location / {
        proxy_pass 后端域名
    }
}

• cors：通过设置响应头信息，允许跨域请求。 浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求（预检）， 服务端返回头信息中需要返回Access-Control-*相关字段，这是需要后端配置的。