Vue-cli@3版本下使用axios如何设置跨域配置?

3.0版本创建的webpack模板已经没有build和config文件夹了,请问该如何配置axios的跨域请求?希望本地能调用后台的测试接口

1 Like

请阅读文档 https://cli.vuejs.org/zh/config/#baseurl

应该是这个:https://cli.vuejs.org/zh/config/#devserver-proxy

1 Like

谢谢!看到文档了,开始是自己的代码有点错误

:joy:突然蒙蔽了

改完之后是可以了,但是我在chorme的调试工具的network中会看到两次请求,这是为什么呢?

第一次请求方式应该是 options
https://blog.csdn.net/insistlzh/article/details/73658230

我看了,第一次并不是跨域的预检options,是个get请求。这个和后台服务器的设置有关吗?

不太清楚,贴一下请求回来的数据。

是后台的问题,刚刚我是拿的百度做的接口,百度的后台没有设置跨域,所以有问题,现在我改用了快递100 的查询接口就可以了,并不会出现两次请求。谢谢你之前的答疑解惑。

我不太清楚你的项目具体情况是怎么样的,但是如果你的项目较大,模块比较多,没有进行懒加载处理的话确实会在首页把所有的模块请求一次性加载完。用了lazyload之后的话就会按需加载

@prince 刚刚没有回复没有@到你

没有哦,这个可能帮不了你了。你去看看vue-cli2和vue-cli3的差别吧,2和3好像改动还是较大的

是按照这样的设置的
尝试,访问远程的代码API是的代码是

Failed to load http://study.com:9009/api/json.php: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

但是network里面的状态码是200
php里面的代码是

header('Content-type: application/json');
header('Access-Control-Allow-Origin:*');//允许所有来源访问
header('Access-Control-Allow-Method:POST,GET');//允许访问的方式
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, token, Accept");
//获取回调函数名

//json数据
$json_data = '["customername1","customername2"]';
//输出jsonp格式的数据
echo $jsoncallback . "(" . $json_data . ")";

尝试2,访问本地的数据的代理配置

'/static': {
        target: 'http://localhost:8080/static',
        changeOrigin: true,
        ws: true,
        // logLevel: 'debug'
        pathRewrite: {
          '^/static': '/staic'
        }
      }

在组件中的使用是

  this.$axios.get('/static/userInfo.json')
    // console.log(res);
    .then(function(response){
      console.log('都已经拿到数据了');
      console.log(response);
    })
    .catch(function(err){
      console.log(err);
    });

页面报错

GET http://localhost:8080/static/userInfo.json 404 (Not Found)

不明白怎么是404.本地的json数据是存在的

根目录放个vue.config.js

vue3.0的脚手架跨域怎么不管用呢?