一、什么是跨域?跨域是如何产生的?
-
同源策略:浏览器内置的规则！是浏览器提供的一种安全机制，限制来自不同源的数据。如果当前页面的URL地址和Ajax的请求地址不同源，浏览器不允许得到服务器的数据；
-
同源:协议 http||https、域名和 port端口** 都相同则同源，只要有一项不同就是不同源;
-
跨域:不同源就跨域;跨域请求出现错误的条件： 浏览器[同源策略] && 请求是ajax类型
-
文件资源-不受同源限制:通过页面内标签、直接在地址栏输入 / 文件资源是通过link script标签访问 url 的
二、如何解决跨域?
1.JSONP
JSONP和json没有任何关系
JSONP需要前后台配合
实现原理: （另辟蹊径、瞒天过海）
走获取文件资源script这个方式
JSONP实现跨域请求的原理简单的说，就是动态创建
JSONP 由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的 JSON 数据。
<script type="text/javascript"> // 2.文件资源 // JSONP：获取文件资源，压根不受同源策略限制； // URL设置给 script 标签 function fn (data) { console.log(data) } </script>
<!-- 前端拿到是个什么？JS文件，JS代码（变量、函数） --> <!-- 后台要求：获取文件资源的时候，告诉后台前面函数名叫啥callback=fn --> <!-- 后台返回：约定好：文件内容：函数执行(); --> <!-- 给大家把前端需要数据，作为函数实参传入，无形中可以拿到数据！ --> <!-- 疑问：直接把JS文件里面直接写成数据！实现方案为什么不直接返回数据？反而返回是一个JS代码 函数执行(数据) --> <script type="text/javascript" src="http://www.liulongbin.top:3006/api/jsonp?callback=fn"> // 上述URL返回的内容： hello({"message":"JSONP请求测试成功","data":{}}) </script>
JSONP简单讲就是请求后，返回的的形式是javascript形式的文件，这样就巧妙的避开了同源策略，不过现在也是比较少用了；
2. CORS（跨域资源共享）
- 一般都是后台设置
CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。
它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。
//拦截所有请求 3000端口服务器 server.use((req, res, next) => { // Access-Control-Allow-Origin 允许哪些客户端访问我 // * 代表允许所有的客户端访问我 server.header('Access-Control-Allow-Origin', '*'); // Access-Control-Allow-Methods 允许客户端使用哪些请求方法访问我 server.header('Access-Control-Allow-Methods', 'get,post'); next(); // 将控制权传递给下一中间件 });
后端在请求头配置Access-Control-Allow-Origin:*/或者指定的IP这样前端在请求的时候就不会受到同源策略的影响；
3.反向代理 (这是最常用的)
React中，有个插件,`http-proxy-middlw# 跨域问题常用的三种解决方式# 跨域问题常用的三种解决方式# 跨域问题常用的三种解决方式
\在vue.config.js配置文件中，有一项是devServer，它就是我们下边要操作的主角。are`,可以做反向代理，然后在目录文件src下面配置一个setupProxy.js文件就可以进行反向代理请求服务端的API接口;
vue-cli解决跨域配置说明
在vue.config.js配置文件中，有一项是devServer，它就是我们下边要操作的主角。
最后
1.目前最多的就是反向代理，反向代理的插件也很多，所以可以多了解下反向代理这块
2.CORS这个是必须要后端配合的，单前端无法利用CORS跨域
