前端基础之《Vue（23）—跨域问题》

一、跨域问题说明

1、每一个“域”都由协议、IP地址和端口号，这三部分组成。那么什么是跨域？当你从当前域访问另一个域时，如果上述三个部分有任何一个部分不相同，就是跨域

比如：http://localhost:8080  -->  http://localhost:9999  是跨域

2、为什么跨域浏览器会拒绝
在所有浏览器中都内置了一个安全策略，叫做CORS同源策略，这个同源策略有什么特点呢？同源策略会阻塞ajax跨域请求。

3、在8080端口上，使用ajax请求9999服务器接口，会被阻塞吗？
如果这件事发生在浏览器中，必然会被阻塞。如果发生非浏览器环境，比如node环境中，肯定不会被阻塞。

4、在8080端口上，使用JSONP请求9999服务器接口，会被阻塞吗？
肯定不会，因为JSONP不是ajax。哪怕这个行为发生在浏览器中，也不会被阻塞。

5、以浏览器环境为例，你有哪些解决跨域被CORS阻塞的方案呢？
（1）使用JSONP
因为JSONP不是ajax，同源策略管不了。但是JSONP只能解决GET请求的跨域问题。
（2）CORS
要求在后端服务器配置CORS的header字段，这种做法相当于把后端接口变成了开源接口。
（3）代理
在本地开发中，我们使用webpack做代理；在生产环境下，我们使用nginx做代理。

6、vue.config.js

const { defineConfig } = require('@vue/cli-service')// 这是@vue/cli这个脚手架指定的配置文件，它的背后是webpack
// 配置文件修改后，务必要重启
module.exports = defineConfig({transpileDependencies: true,devServer: {// 当vue项目中使用ajax发起请求时，如果请求路径中有/api，表示匹配成功// 背后的node服务就会将其代理到target远程服务器上proxy: {'/api': {target: 'http://localhost:9999',  // 是真实服务器地址changeOrigin: true}}}
})

7、为什么代理可以解决跨域问题
保证了ajax同域请求。