一、跨域问题

首先理解代理服务器出现的目的，它的出现是为了解决跨域问题。

1、跨域问题提出

由浏览器的安全策略（同源策略）引起的，限制了在不同域（主机、端口及协议中至少有一个不同）之间进行的资源请求。当前浏览器在s1（如本机）发出请求向一个服务器s2，s2接受到后将数据返回，但是s1拿不到。如果前端应用和后端服务器处于不同的域，浏览器会阻止跨域请求。这种限制是为了保护用户数据和确保安全性。

2、解决跨域常见方法：

1）、cors（跨源资源共享）

服务器在响应头中设置特定的字段，来指示浏览器该请求是否被允许。如果后端服务器正确设置了 CORS 响应头，浏览器就会允许跨域请求。

例如：使用node中的express模拟一个服务器。http://localhost:3000/first

本地http://localhost:8080​​​​

进行访问。未配置cors响应头！提示cors错误

设置响应头 res.set('Access-Control-Allow-Origin', 'http://localhost:8080​​​​​​​'); --只允许接受设置目标域名的请求访问，其他会被拦截。res.set('Access-Control-Allow-Origin', '*'); * 代表接受所有！

2）、代理服务器

在客户端和目标服务器之间新建一个服务器（同源策略中代理服务区的地址需要同客户端域名地址一致）。

这里使用了http-proxy-middleware 模块来配置代理服务器，可以使用其他的，如http-proxy模块。

const { createProxyMiddleware } = require('http-proxy-middleware');// 指定需要代理配置的前缀路径为apiapp.use('/api',createProxyMiddleware({target: 'http://localhost:3000/first',changeOrigin: true,}));

3）、JsonP

解决跨域问题就是同cdn方式引入其他框架，如：引入jquery

就是在script标签中设置src属性值为请求api的地址，想要获取请求数据，需要在访问接口服务器中提前设置好变量或者方法等。使用发送请求只能为get，并需要确保接受 JSONP 请求的服务器返回的数据是可信的，以避免安全风险。

<!-- jsonp访问接口 --><script src="http://localhost:3000/first"></script><script>// resData 是在api接口处写好的console.log(resData);// funData方法也是在api接口处写好的// function funData(data) {// console.log(data);// }</script>

服务端设计：

// jsonp 全局变量resData返回

res.send("var resData = 'I am Json'")

// 全局函数返回

// res.send('funData([{id:"001",name: "李明"},{id: "002",name: "Jom"}])')

二、理解vue2脚手架“配置代理服务器”

vue2中设置proxy来配置代理服务器

在vue2框架的config配置文件里：

proxyTable: {

'/api': {

target: '/index.php',

changeOrigin: true,

pathRewrite: {

'^/api': '',

},

},

},

设置以/api开头的路径才会代理，代理过程中加api，后续真实发送请求会将api设为' '。

如果后续上线时：服务器设置请求接口特定的开头，每个头部都有当时含有特定的前缀，如api-payment，则需要打包时重新设置！

​​​​​​​​​​​​​​​​​​​​​

如果觉得《理解vue2脚手架“配置代理服务器”（附加：解决跨域）》对你有帮助，请点赞、收藏，并留下你的观点哦！