vue项目配置代理解决跨域问题

Vue项目配置代理

前端向服务器发送请求时，经常会遇到跨域问题，那么什么是前端跨域呢？在vue项目中如何利用代理解决呢？

什么是跨域？

• JavaScript同源策略：当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域。不同域之间相互请求资源，就算作“跨域”。同源策略要求源相同才能正常进行通信，即协议、域名、端口号都完全一致。**同源策略限制：**表单提交、AJAX请求等。
• 注意：跨域并不是请求发不出去，请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了。

proxy代理解决跨域

• **原理：**浏览器是禁止跨域的，但是服务端不禁止，在本地运行npm run serve等命令时实际上是用node运行了一个服务器，因此proxyTable实际上是将请求发给自己的服务器，再由服务器转发给后台服务器，做了一层代理，因此不会出现跨域问题。

配置（vue.config.js）

• 方法一

  • 优点：配置简单、请求资源时直接发给前端（8080）即可
  • 缺点：不能配置多个代理，不能灵活的控制请求是否走代理
  • 当请求了前端不存在的资源时，该请求会转发给服务器(优先匹配前端资源)

 module.exports = {
     devServer: {
             proxy: 'http://localhost:5000',
     }
 }

• 方法二

  • 优点：可以配置多个代理，且可以灵活的控制请求是否走请求
  • 缺点：配置繁琐，请求资源时必须加前缀

module.exports = {
    devServer: {
        proxy: {
            "/api": {
                target: 'http://localhost:5000',
                pathRewrite: { '^/api': '' },
                ws: true,//用于支持websocket
                changeOrigin: true
            },
            "/allCar": {
                target: 'http://localhost:5001',
                pathRewrite: { '^/allCar': '' },
                ws: true,
                changeOrigin: true
            }
        }
    }
}
/*
	changeOrigin设置为true时,服务器收到的请求头中的host为:http://localhost:5000
	changeOrigin设置为false时,服务器收到的请求头中的host为:http://localhost:8080
	changeOrigin默认为true
*/