cuixiaoler
2021-03-23 23:19
采纳率: 100%
浏览 222

vue cli4.1.0 vue.config.js跨域不生效

1、vue cli4.1.0版本;

2、vue.config.js 设置了跨域

3、请求 报错

4、axios的设置是这样的

// "use strict";

import Vue from 'vue';
import axios from "axios";

// Full config:  https://github.com/axios/axios#request-config
// axios.defaults.baseURL = process.env.baseURL || process.env.apiUrl || '';
// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

let config = {
  baseURL: "/api",//process.env.baseURL || process.env.apiUrl || "",
  timeout: 30 * 1000, // Timeout   2分钟
  withCredentials: true, // Check cross-site Access-Control   指示是否跨站点访问控制请求
  //headers: {'X-Custom-Header': 'foobar'},
  headers: { 'staffid': '1' ,"timestamp":new Date().getTime().toString(),"nonce":'1234567890'},
};

const _axios = axios.create(config);


//可以截取请求或响应在被 then 或者 catch 处理之前
//添加请求拦截器
_axios.interceptors.request.use(
  function(config) {
    //在发送请求之前做某事
    return config;
  },
  function(error) {
    //请求错误时做些事
    return Promise.reject(error);
  }
);

//添加响应拦截器
_axios.interceptors.response.use(
  function(response) {
    //对响应数据做些事
    return response;
  },
  function(error) {
    //请求错误时做些事
    return Promise.reject(error);
  }
);

Plugin.install = function(Vue, options) {
  Vue.axios = _axios;
  window.axios = _axios;
  Object.defineProperties(Vue.prototype, {
    axios: {
      get() {
        return _axios;
      }
    },
    $axios: {
      get() {
        return _axios;
      }
    },
  });
};

Vue.use(Plugin)

export default Plugin;

尝试了各种设置,跨域问题都不能生效,请大佬指点![抱拳][抱拳][抱拳]

 

 

 

 

 

 

 

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • BCS-点心 2021-03-30 09:27
    已采纳

    1.这个不是跨域问题,跨域已经生效,但是路径访问不到,所以是404

    2.你单独在浏览器中访问这个路径

    3.大概率是请求映射的问题,导致路径找不到

    已采纳该答案
    打赏 评论
  • storyofus 2021-04-06 16:34

    今天遇到类似的问题,是因为我的项目构建用的还是webpack的配置,在webpack配置文件proxyTable中设置跨域就可以了,不是很懂,不知道有没有帮助

    打赏 评论

相关推荐 更多相似问题