Proxy方式解决跨域

最新推荐文章于 2025-03-22 11:23:22 发布

转载最新推荐文章于 2025-03-22 11:23:22 发布

· 713 阅读

1 ·

版权

原文链接：https://blog.youkuaiyun.com/qq_43158726/article/details/109604850?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-10&spm=1001.2101.3001.4242

文章标签：

#vue #ajax #vue.js #es6

在使用vue cli3.x之后创建vue项目，项目结构发生了较大的改变，不在存在vue.config.js配置文件，需要手动创建该文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。

决解方法：
以请求百度为例 https://www.baidu.com/ajax/data
在vue.config.js文件创建，添加

  devServer: {
    proxy: {
      '/ajax': {//ajax指的是如果向/ajax请求数据时，直接代理。
        target:'https://www.baidu.com', // 你请求的第三方接口
        changeOrigin:true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
        pathRewrite: {
              "^/api": "/api"
            }
      }
    }
 }
  axios.get('/ajax/data')
        .then(function (response) {
          console.log(response);
        })
        .catch(function (error) {
          console.log(error);
        });

就可以解决跨域请求了。
注意：
修改了配置文件，都需要重新启动一次服务器，不然无法生效。