博客

每天一个报错，个各不相同。

看见下面的这行报错是不是感觉跟熟悉？

没错，vue的跨域问题，记录一下我的解决方法并分享给大家 ~ . ~

Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

那就直接上代码？

module.exports = {
    devServer: {
        open: true, //自动打开浏览器
        host: 'localhost',
        port: 8080,
        https: false,
        //以上的ip和端口是我们本机的;下面为需要跨域的
        proxy: {//配置跨域
            '/api': {
                target: 'http://11111111111.com',//填写你们真实的后台接口
                ws: true,
                changOrigin: true,//允许跨域
                pathRewrite: {
                    '^/api': ''//请求的时候使用这个api就可以
                }
            }
            
        }
    }
}

我的vue文件中没有config文件夹，所以新建了个vue.config.js文件，放在根路径就好。

需要跨域的页面

mounted(){
    this.job()
  },
  methods:{
    job(){
      post("/api/index.php/user/index/postList",{  //这个里面的写路径的后面一部分，前面记得加上/api
        token:"",           
        page: this.page,
        count: this.count,
        type: this.type,
      })
      .then((res) => {
        console.log(res);
      })
      .catch(function (err) {
        console.log("请求失败");
      });
    },
  },

然后信心满满的重启项目，再次运行，还是报错…

仔细找了一遍，发现封装axios的文件里面加了baseURL，会在发送请求时自动拼接到url的头部

const instance = axios.create({
  // baseURL: "http://whlt.51job-ideal.com", //baseURL会在发送请求时拼接在url头部
  timeout: 5000,
  headers: {
    "Content-Type": "application/json;charset=utf-8",
  },
});

将这一行注释掉，重启项目，拿到数据。

以下是我axios的封装（以防万一某些小伙伴复制代码运行不了 > . < ）

import axios from "axios";

const instance = axios.create({
  // baseURL: "http://whlt.51job-ideal.com", //baseURL会在发送请求时拼接在url头部
  timeout: 5000,
  headers: {
    "Content-Type": "application/json;charset=utf-8",
  },
});



axios.defaults.withCredentials = true; //true允许跨域

if (process.env.NODE_ENV === "production") {
  /*第二层if，根据.env文件中的VUE_APP_FLAG判断是生产环境还是测试环境*/
  if (process.env.VUE_APP_FLAG === "pro") {
    //production 生产环境
    axios.defaults.baseURL = "http://localhost:8080";
  } else {
    //test 测试环境
    axios.defaults.baseURL = "";
  }
} else {
  //dev 开发环境
  axios.defaults.baseURL = "http://localhost:8080";
}

//请求拦截
instance.interceptors.request.use(
  function (config) {
    console.log("全局请求拦截");
    console.log(config);
    return config;
  },
  function (err) {
    return Promise.reject(err);
  }
);

//响应拦截
instance.interceptors.response.use(
  (response) => {
    // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据
    // 否则的话抛出错误
    if (response.status === 200) {
      return Promise.resolve(response);
    } else {
      return Promise.reject(response);
    }
  },
  // 服务器状态码不是2开头的的情况
  (error) => {
    if (error.response.status) {
      switch (error.response.status) {
        // 401: 未登录
        case 401:
          router.replace({
            path: "/login",
            query: {
              redirect: router.currentRoute.fullPath,
            },
          });
          break;
        case 403:
          this.$message("管理员权限已修改请重新登录");
          // 清除sessionStorage
          // store.commit("qiut");
          // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面
          setTimeout(() => {
            router.replace({
              path: "/login",
              query: {
                redirect: router.currentRoute.fullPath,
              },
            });
          }, 1000);
          break;
        // 404请求不存在
        case 404:
          this.$message("请求页面飞到火星去了");
          break;
      }
      return Promise.reject(error.response);
    }
  }
);

//封装get请求
export function get(url, params) {
  return instance.get(url, {
    params,
  });
}

//封装post请求
export function post(url, data) {
  return instance.post(url, data);
}


// import { post } from "../../utils/request";  调用

记得在需要调用的页面引入噢

import { post } from "../../utils/request";

技术不太好，见笑了哈，大家分享问题，一起共同成长。