vue通过proxy实现跨域

原创已于 2024-10-22 15:59:54 修改 · 345 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#跨域 #vue.js

于 2019-03-06 18:42:13 首次发布

vue 专栏收录该内容

43 篇文章

订阅专栏

本文介绍如何在Vue项目中通过配置vue.config.js文件实现跨域请求。具体步骤包括设置代理目标、开启origin更改及WebSocket支持，并进行路径重写。通过axios在组件中发起带/api前缀的请求，服务器端可直接拦截并响应。

普通的跨域访问

1、在项目根目录新建文件vue.config.js（文件名必须是这个）

 module.exports = {
        devServer: {
            proxy: {
                '/api': {
                    target: 'http://localhost:8866/', //对应自己想要访问的另一个域的接口
                    changeOrigin: true,// 是否改变源地址
                    pathRewrite: {
                        '^/api': ''
                    }
                }
            }
        }
    }

2、组件中使用axios发起数据请求，在地址前面加上/api

created(){
this.$axios({
url:“/api/getData.do”,
method:“post”
}).then(resp=>{
this.stuArr=resp.data.data
console.log(resp.data.data);
}).catch(err=>{
console.log(err);
})
}

3、另一个域中的router可直接拦截/getData.do,返回响应数据
4、运行两个域的服务器，访问页面

post请求403错误的跨域

在vue.config.js中配置onProxyReq，删除请求头的Origin字段，可以规避部分跨域问题。此方法在浏览器自动添加Origin头可能导致CORS限制时有用，但并非所有情况都适用。CORS机制要求服务器允许的Origin，删除Origin可能影响某些需此头部的请求。

module.exports = {
        devServer: {
            proxy: {
                '/api': {
                    target: 'http://localhost:8866/', //对应自己想要访问的另一个域的接口
                    changeOrigin: true,// 是否改变源地址
                    pathRewrite: {
                        '^/api': ''
                    }，
                    onProxyReq: function (proxyReq) {
			            proxyReq.removeHeader('origin'); // <== 关键
			          }
                }
            }
        }
    }

来自某位大佬的解释：

在向代理服务器发送请求之前，先删除请求头中的 Origin 字段。

在使用跨域代理时，浏览器会自动添加 Origin 头部字段，指示请求的源地址。例如，如果您的网站为 www.example.com，而您向
api.example.net 这个域发出 Ajax 请求，那么浏览器会自动添加以下请求头：

Origin: www.example.com
这样的请求头就是用来表明请求的来源地址的，以便服务器做出正确的响应。在某些情况下，这样的请求头可能会导致问题，比如受到 CORS
限制或被防火墙拦截等。此时，您可以通过配置 onProxyReq 钩子函数来删除该请求头。

具体来说，onProxyReq 钩子函数是在请求被代理转发出去之前被调用的，它接收一个代表请求的 proxyReq
对象参数。因此，以上代码的作用就是在代理请求被发送出去之前，通过在 proxyReq 对象上调用 removeHeader()
方法，将请求头中的 Origin 字段删除掉，从而避免潜在的跨域问题。删除请求头中的 Origin
字段并不能完全解决跨域问题，但可以规避某些 CORS 问题。

通常情况下，浏览器会对跨域请求进行安全限制，以防止来自不可信来源的数据被加载和执行。其中的一种限制机制就是
CORS（Cross-Origin Resource Sharing 跨源资源共享）。

CORS 机制要求服务器在响应中必须包含一些特定的头部字段，才能允许跨域请求。其中一个重要的头部字段就是
Access-Control-Allow-Origin，表示服务器允许哪些域名的请求访问资源。如果该头部字段的值与请求头中的 Origin
字段不匹配，浏览器就会默认拦截该请求，以保障数据的安全性。

当您使用代理方式发起跨域请求时，代理服务器会代替浏览器向目标服务端发送请求，并将响应返回给浏览器。因此，删除请求头中的 Origin
字段可以避免某些针对浏览器的跨域限制，使得代理请求更加顺利。但需要注意的是，如果被请求的目标服务器明确规定必须携带 Origin
头部字段才能处理该请求，那么删除该请求头部字段可能会导致请求失败或被拒绝。