一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第14天，点击查看活动详情。

跨域

一、为什么会出现跨域问题

出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）

二、什么是跨域

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

三、非同源限制

【1】无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB

【2】无法接触非同源网页的 DOM

【3】无法向非同源地址发送 AJAX 请求

四、跨域解决方法

【1】设置document.domain解决无法读取非同源网页的 Cookie问题
【2】跨文档通信 API：window.postMessage()
【3】JSONP
【4】CORS
【5】webpack本地代理
【6】websocket
【7】Nginx反向代理

着重讲解Nginx的反向代理去处理跨域的问题，关于nginx的安装和使用请看上一篇，nginx的反向代理

server {
listen 3002;
server_name localhost;
location / {
        root /opt/WebTemplate
        index index.html index.html;
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET, PUT, POST, DELETE, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'Content-Type,*';
        proxy_pass http://120.12.106.198:8080;
}
location /api {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET, PUT, POST, DELETE, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'Content-Type,*';
        proxy_pass http://120.12.106.198:8080;
}
}

说明：

（1） nginx的访问端口可以修改为没被占用的其他端口，这里设置nginx的访问路径是  http://localhost:3002

（2）注意这里需要添加 proxy_pass 为本地运行的项目地址 http://120.12.106.198:8080 ！！！  当访问 http://localhost:3002 的时候，location会匹配 ' / ' 到文件夹根目录下的index.html文件，但这里添加  proxy_pass 后，访问 http://localhost:3002 的时候会代理到 http://120.12.106.198:8080，而且你的访问路径显示的还是 http://localhost:3002 ，内容是 http://120.12.106.198:8080的

（3） 这里location匹配的是 访问  http://localhost:3002/apis/  路径的时候，在proxy_pass填上需要用到的外域api地址  http://120.12.106.198:8080  ，此时就相当于访问： http://120.12.106.198:8080  ，但实际上显示在你眼前的还是原来路径： http://localhost:3002/apis/   ，只是你访问这个原路径的时候nginx自动帮你代理到你想要访问的api路径 。但这里有个很重要的细节需要注意： 匹配路径  /apis/  和代理路径  http://120.12.106.198:8080/  后面的斜杠统统都不能少！！！

修改完 nginx.conf 文件后，需要重启nginx ，才会生效 ！！！
在nginx的sbin路径下

./nginx -s reload

4.本地项目配置和访问方式：

本地项目中，我访问接口以这样的格式： /apis/，然后运行本地项目后，访问 http://localhost:3002 地址，而不是 http://120.12.106.198:8080 。

直接访问 http://120.12.106.198:8080 不会通过 nginx中转，而访问 http://localhost:3002 通过nginx中转解决了跨域问题。