跨域問題

開發環境

找到config資料夾下面的index.js檔案，修改proxyTable

//config 下的index.js
proxyTable: {
  '/api': {  //使用"/api"來代替"http://f.apiplus.c" 
    target: 'https://www.baidu.com', //介面的域名
    secure: true,// 如果是https介面，需要配置這個引數
    changeOrigin: true, // 如果介面跨域，需要進行這個引數配置，為true的話，請求的header將會設定為匹配目標伺服器的規則（Access-Control-Allow-Origin）
    pathRewrite: { 
      '^/api': '' //本身的介面地址沒有 '/api' 這種通用字首，所以要rewrite，如果本身有則去掉 
    } 
  } ,
},
host: '10.16.101.136', // can be overwritten by process.env.HOST
port: 8071, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false,//是否自動開啟瀏覽器
errorOverlay: true,//查詢錯誤
notifyOnErrors: true,//通知錯誤
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
 

修改完之後重啟專案 npm run dev

生產環境

設定nginx配置檔案：

location {
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
}

配置完成後重啟nginx

service nginx reload

設定不同的介面地址

/config/dev.env.js

/config/prod.env.js

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

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_ROOT: '"//10.16.101.136:8071/api"'//本地介面地址
})

//prod.env.js
'use strict'
module.exports = {
  NODE_ENV: '"production"',
  API_ROOT: '"https://www.baidu.com"',//生產介面地址
}
 

配置完成後在main.js中定義

import axios from 'axios'
Vue.prototype.$axios = axios;
Vue.prototype.baseURL = process.env.API_ROOT; //讀取config中的配置
// axios.defaults.timeout = 5000; //預設請求時間
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'; //請求頭格式
// axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';//請求頭格式

呼叫

this.$axios.post(this.baseURL+"/login/login",params).then(res=>{
    console.log(res)
},err=>{
    console.log(err);
})

參考網址：https://blog.csdn.net/u014054437/article/details/82970725

https://www.cnblogs.com/web-record/p/9467258.html

https://segmentfault.com/q/10100000099191