項(xiàng)目部署到服務(wù)器上了，請(qǐng)求遇到跨域的問題是非常常見的事情。我報(bào)錯(cuò)的內(nèi)容如下：
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

原因是因?yàn)椋矣玫氖?code>自己個(gè)人的服務(wù)器上傳的代碼，域名也是我自己的，而發(fā)起請(qǐng)求的地址是公司的地址，所以跨域是必然。

解決辦法：

步驟一：請(qǐng)求頭配置

前臺(tái)注釋掉請(qǐng)求攔截器里面的config.headers.Authorization = window.sessionStorage.getItem('token')這段代碼

Vue.prototype.$fyhttp = axios
// axios請(qǐng)求攔截器
axios.interceptors.request.use(config => {
  console.log("請(qǐng)求攔截器------", config)

  // 為請(qǐng)求頭對(duì)象，添加Token驗(yàn)證的Authorization字段
  // config.headers.Authorization = window.sessionStorage.getItem('token')
  if (typeof config.data === "object") {
    config.data.token = '33333';
    config.data = qs.stringify(config.data); //數(shù)據(jù) 轉(zhuǎn)換，使用qs插件，將json對(duì)象轉(zhuǎn)成指定格式
  }
  return config
}, error => {
  return Promise.reject(error);
});

或者讓后臺(tái)開發(fā)人員在header里面增加如下代碼

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

步驟二：操作config目錄下的dev.env.js和prod.env.js兩個(gè)文件

這里開發(fā)環(huán)境和生產(chǎn)環(huán)境我配置的請(qǐng)求地址都是一樣的，當(dāng)然，你也可以設(shè)置成不一樣的。

image.png

• dev.env.js文件中，新增API_HOST:'"https://api.feiyang.life"',，那么開發(fā)環(huán)境下的請(qǐng)求地址就配置好了。后續(xù)你執(zhí)行sudo cnpm run dev命令，運(yùn)行界面的時(shí)候，請(qǐng)求的地址就是 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"',，那么生產(chǎn)環(huán)境下的請(qǐng)求地址就配置好了。后續(xù)你執(zhí)行sudo cnpm run build命令，進(jìn)行打包的時(shí)候，請(qǐng)求的地址就是 prod.env.js下的https://api.feiyang.life

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

步驟三(可忽略)：在main.js對(duì)axios起別名，并攔截網(wǎng)絡(luò)請(qǐng)求

import axios from 'axios'
Vue.prototype.$fyhttp = axios
axios.interceptors.request.use(config => {
  console.log("請(qǐng)求攔截器------", config)
  if (typeof config.data === "object") {
    config.data.token = '33333';
    // 轉(zhuǎn)換數(shù)據(jù)，這里依賴qs模塊，將json轉(zhuǎn)param
    // 因?yàn)檫@里對(duì)請(qǐng)求傳遞的參數(shù)進(jìn)行了攔截并轉(zhuǎn)換，所以下個(gè)步驟中的`data:jsonParams`不用再轉(zhuǎn)換了
    config.data = qs.stringify(config.data); 
  }
  return config
}, error => {
  return Promise.reject(error);
});

步驟四：拼接請(qǐng)求路徑process.env.API_HOST + "/item/info"，測(cè)試是否成功

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("異常情況");
    }
  })
  // 解決網(wǎng)絡(luò)異常，不寫如下catch，會(huì)在控制臺(tái)打印報(bào)錯(cuò)信息的問題
  .catch(error => {

  });
},

步驟五：ok，獲取到了數(shù)據(jù)

image.png

image.png