对跨域的最后一战
（给前端大全加星标，提升前端技能）
转自：掘金 - angleshe
https://juejin.cn/post/6926186705472978958
前言
在前后端对接时，我们常常会遇到过ajax报出上图的错误，这就是典型跨域问题。
什么是跨域
跨域是指绕过浏览器同源策略约束请求资源的方式。
同源策略(Same origin policy): 是指在Web浏览器中，允许某个网页脚本访问另一个网页的数据，但前提是这两个网页必须有相同的URI、主机名和端口号，一旦两个网站满足上述条件，这两个网站就被认定为具有相同来源。——维基百科
为什么需要同源策略
同源策略是1995年由Netscape公司入浏览器的一种安全策略，主要防止XSS(跨站脚本攻击)、CSRF(跨站请求伪造) 等攻击。
同源的界定
同源的判断依据是协议、域名、端口号是否一致。（注：ip不是评判标准，不同域名相同ip不属于同源）。
然而在实际应用中，我们常常会遇见的前后端是不属于同源，这时候便需要我们实现跨域访问。
怎么跨域
修改浏览器配置
跨域是浏览器的一种机制！！！
跨域是浏览器的一种机制！！！
跨域是浏览器的一种机制！！！（重要的事说三遍）
所以只要我们关闭了浏览器这个机制，就能巧妙的规避了这个问题。
不同的浏览器有不同设置方法，这里以Chrome为例
mac：
新建一个空白的文件夹用命令行注入参数打开Chrome浏览器：
open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=...
--user-data-dir: 你新创建文件夹的目录
windows：
新建一个空白的文件夹。
右键Chrome，在属性目标路径中后添加
--disable-web-security \--user-data-dir=...--user-data-dir: 你新创建文件夹的目录
win Chrome 目标修改
在实际应用中，我们不可能让用户适应我们的要求而修改浏览器的配置，而且这种方法是直接屏蔽整个用这个浏览器浏览的页面的同源策略，这将出现很大的安全问题，所以该方法比较不常用也不推荐使用。
特定请求方式
利用html中一些不存在跨域限制的请求方式（script、img、iframe、postMessage...）请求资源数据。
比较常见的一种方法就是jsonp，jsonp是利用script发送get请求不受跨域影响原理，通过注册全局回调函数，并把回调函数名以参数方式放入script标签url发送给后端，后端动态生成调用回调函数的脚本。
话不多说，直接上才艺。
前端：
后端：
通过上面的代码，机智的你们一定会发现这种方式有个很大的弊端：请求方式只能通过get，远远不能满足我们日常各种骚操作。
跨域资源共享（CORS）
通过后端修改http响应头，允许服务器标示浏览器开放使用除了它自己以外的其它不同源资源数据。
前端请求：
后端：
注意：当需要带cookie请求时， 前端需要XMLHttpRequest开启withCredentials，后端需要把响应报头Access-Control-Allow-Credentials设置为true
代理
利用把不同源资源代理到与前端同源的路径下，实现跨域
常见的nginx配置：
总结
在遇到跨域问题上，可以通过以上的几种思路出发，去寻找更适合自身业务需求的方法解决，这也是我们应对问题、解决问题的基本方法论：从问题的本质出发，分析问题，找出解决问题的各种方法，最从这些方法找出最优解。
- EOF -
2、跨域几种方式
觉得本文对你有帮助？请分享给更多人
推荐关注「前端大全」，提升前端技能
点赞和在看就是最大的支持❤️