关于vue-cli3中配置请求跨域的问题

小鱼儿 2023-10-03 14:19 50阅读 0赞

### 关于vue-cli3中配置请求跨域的问题 ###

根据Vue CLI3官方文档，

需要在**vue.config.js**文件中配置**devServer.proxy**选项来解决跨域问题。

**1.关于vue.config.js文件**

此文件在vue-cli3中不会自动生成，需要手动在项目根目录下创建。

**2.配置devServer.proxy选项**

以豆瓣的电影接口为例，进行如下配置。

1.  proxy中的/j/search\_subjects代表匹配api的路径，当命中请求中的url时进入这个代理，进行跨域请求；
2.  target代表想要跨域的目标url；
3.  changeOrigin：true代表允许跨域；
4.  pathRewrite：代表当匹配到上面的路径/j/search\_subjects时需要在target后面拼接什么路径;

module.exports = {
        
        devServer: {
        
            proxy: {
        
                '/j/search_subjects': {
        
                    target: 'https://movie.douban.com',
                    changeOrigin: true,
                    pathRewrite: {
        
                        '^/j/search_subjects': '/j/search_subjects'
                    }
                }
            }
        }
    }

**3.在发起请求时：**

this.axios.get("/j/search_subjects?type=movie&tag=%E7%83%AD%E9%97%A8&page_limit=5&page_start=0")
          .then(response => {
        
            console.log(responses);
          })

**可以看到，当在此发起get请求时，在上面的配置文件中匹配到了请求url中的“/j/search\_subjects”，此时配置就会生效，把这个请求拼接到上面的target后面，请求不同域中远端的资源。**

而此时打开浏览器开发者模式，通过network可以看到，

这个请求的路径显示为：http://localhost:8080/j/search\_subjects?type=movie&tag=%E7%83%AD%E9%97%A8&page\_limit=5&page\_start=0,

而实际请求的地址却是：https://movie.douban.com/j/search\_subjects?type=movie&tag=%E7%83%AD%E9%97%A8&page\_limit=5&page\_start=0

这就是实际解决跨域的方式，通过把域名修改来达到跨域的目的，而实际访问的路径却是另一个域名的资源，这就是通过proxy来实现跨域的方法。