什么是跨域，如何解决跨域问题

跨域全称为Cross-Origin Resource Sharing，意为跨域资源共享，是一种允许当前域（domain）的资源被其他域（domain）的脚本请求访问的机制，通常由于同源安全策略，浏览器会禁止这种跨域请求。

而我们所说的跨域问题是因为违反了浏览器的同源安全策略而产生的。

同源安全策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSRF等攻击。

同源是指协议、域名、端口三者相同，即使两个不同的域名指向同一个ip地址也是非同源。

注意：

跨域并不是请求发不出去，请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了。

jsonp：json with padding

原理：利用 script 标签没有跨域限制的特点，通过动态生成 script 标签，指定 src 属性的方式加载跨域资源。

实现流程：

理解：全局定义一个函数 getDatas，并通过script标签的src属性把函数名发到后端，后端收到函数名后，把数据填充进括号里，返回给前端，比如字符串 "getDatas('目标数据')"，前端得到字符串后，因为是script标签，当作js文件进行解析，发现是个函数调用，执行函数后数据就得到了。

要求：JSONP需要服务器进行支持。

缺点：只支持 GET。

应用场景：有些第三方数据接口可能会使用jsonp解决跨域问题，工作中基本不用。

浏览器是否启用同源安全策略是根据后端响应的 Access-Control-Allow-Origin 响应头来定的，所以配置后端是最直接的一种方法，也是工作中常用的解决方案。

支持：支持所有的主流浏览器、IE9+。

操作：在服务器端进行配置，加一个 Access-Control-Allow-Origin 响应头

如果这个字段的值是"*"，那么会允许所有请求，如果是一个域名，那么浏览器就不会对这个域名下的请求的响应进行拦截。

根据开发接口的语言和库的不同，配置 Access-Control-Allow-Origin响应头的方法也不同，如果使用的是 node.js 和 express，那么可以添加 cors 中间件：

cors 默认会允许所有跨域请求，如果要限制指定域名，可以给它的origin配置项传递一个字符串或数组，用于指定一个或多个允许跨域的域名：

前端部署地址：127.0.0.1:8000

中间服务器地址：127.0.0.1:8000

目标服务器地址：127.0.0.1:8888

服务器请求服务器的数据没有跨域问题

正向代理是代理服务器对客户端进行代理，为客户端收发请求，使得真实客户端对目标服务器不可见。

应用：科学上网

反向代理是代理服务器对目标服务器进行代理，为目标服务器进行收发请求，使得真实服务器对客户端不可见。

反向代理不需要客户端进行任何设置。

应用：Nginx

在前端开发环境中，配置代理，中转请求。因为跨域是浏览器的安全策略，如果脱离浏览器发送请求是不会受到同源安全策略的影响的，所以可以使用一个中间服务器对浏览器进行代理。

一般的前端脚手架工具都支持配置代理，例如 vue cli、vite、create react app等。

vue cli 提供的 webpack-dev-server 开发服务器支持设置代理，可以在 vue.config.js 文件中配置devServer配置项下的proxy配置项，把对/api路径的请求代理转发到真实的后端服务器路径，再根据需要对转发后的URL进行改写。

vite 提供的开发服务器支持设置代理，可以在 vite.config.js 文件中配置server配置项下的proxy配置项，把对/api路径的请求代理转发到真实的后端服务器路径，再根据需要对转发后的URL进行改写。

注意：

配置Proxy理后，注释掉 axios.defaults.baseURL

注意：配置proxy的方式只是在开发时使用的，在生产中就不能用了。