项目部署到服务器上了，请求遇到跨域的问题是非常常见的事情。我报错的内容如下：
Access to XMLHttpRequest at 'https://www.feiyangwang.xin/storeActivation/getNotPaymentStoreListForUser' from origin 'http://localhost:8082' has been blocked by CORS policy: Request header field __retrycount is not allowed by Access-Control-Allow-Headers in preflight response.

image.png

原因是因为，我用的是自己个人的服务器上传的代码，域名也是我自己的，而发起请求的地址是公司的地址，所以跨域是必然。

解决办法：

步骤一：请求头配置

前台注释掉请求拦截器里面的config.headers.Authorization = window.sessionStorage.getItem('token')这段代码

Vue.prototype.$fyhttp = axios
// axios请求拦截器
axios.interceptors.request.use(config => {
  console.log("请求拦截器------", config)

  // 为请求头对象，添加Token验证的Authorization字段
  // config.headers.Authorization = window.sessionStorage.getItem('token')
  if (typeof config.data === "object") {
    config.data.token = '33333';
    config.data = qs.stringify(config.data); //数据 转换，使用qs插件，将json对象转成指定格式
  }
  return config
}, error => {
  return Promise.reject(error);
});

或者让后台开发人员在header里面增加如下代码

header('Access-Control-Allow-Headers:x-requested-with,content-type,Authorization ');

步骤二：操作config目录下的dev.env.js和prod.env.js两个文件

这里开发环境和生产环境我配置的请求地址都是一样的，当然，你也可以设置成不一样的。

image.png

• dev.env.js文件中，新增API_HOST:'"https://api.feiyang.life"',，那么开发环境下的请求地址就配置好了。后续你执行sudo cnpm run dev命令，运行界面的时候，请求的地址就是 prod.env.js下的https://api.feiyang.life

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_HOST:'"https://api.feiyang.life"',
})

• prod.env.js文件中，新增API_HOST:'"https://api.feiyang.life"',，那么生产环境下的请求地址就配置好了。后续你执行sudo cnpm run build命令，进行打包的时候，请求的地址就是 prod.env.js下的https://api.feiyang.life

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  API_HOST:'"https://api.feiyang.life"',
}

步骤三(可忽略)：在main.js对axios起别名，并拦截网络请求

import axios from 'axios'
Vue.prototype.$fyhttp = axios
axios.interceptors.request.use(config => {
  console.log("请求拦截器------", config)
  if (typeof config.data === "object") {
    config.data.token = '33333';
    // 转换数据，这里依赖qs模块，将json转param
    // 因为这里对请求传递的参数进行了拦截并转换，所以下个步骤中的`data:jsonParams`不用再转换了
    config.data = qs.stringify(config.data); 
  }
  return config
}, error => {
  return Promise.reject(error);
});

步骤四：拼接请求路径process.env.API_HOST + "/item/info"，测试是否成功

var jsonParams = { itemId: 970 };
this.$fyhttp({
  method: "post",
  url: process.env.API_HOST + "/item/info",
  data: jsonParams,
  timeout: 1000
})
  .then(res => {
    console.log(res);
    console.log(JSON.stringify(res));
    if (res.status == 200) {
      //  this.$router.push("/register");
      window.sessionStorage.setItem("token", "jdsjdlksadljdadghgff");
      this.$router.push("/mainPage");
    } else {
      console.log("异常情况");
    }
  })
  // 解决网络异常，不写如下catch，会在控制台打印报错信息的问题
  .catch(error => {

  });
},

步骤五：ok，获取到了数据

image.png

image.png