VUE-cli跨域 proxyTable

1、什麼是跨域

瀏覽器有同源策略的限制，因此不是同源的腳本不能被訪問，即不能跨域名訪問。

因此爲了實現跨域，先後端都有不少解決的辦法，這裏咱們就來解決webpack下vue的跨域問題。

2、webpack下vue跨域須要配置ProxyTable

1. 增長ProxyTable配置

在vue工程下的config -> index.js -> module.exports -> dev裏增長

proxyTable: {
  '/visit':{
    target: process.env.API_ROOT, //接口域名
    changeOrigin: true, //是否跨域：開啓代理，在本地會建立一個虛擬服務端，而後發送請求的數據，並同時接收請求的數據，這樣服務端和服務端進行數據的交互就不會有跨域問題
    pathRewrite: { //代理
    '^/visit':'/visit'  //https://XX.XX.XX/visit/
    //'^/api': '/api'   //http://XX.XX.XX.XX:8083/api/login
    //'^/api': '/'      //http://XX.XX.XX.XX:8083/login
    }
  }
},
複製代碼

2. 根據開發和生產環境配置不一樣地址

開發環境

在vue工程下的config -> dev.env.js -> module.exports 修改API_ROOT

生產環境

在vue工程下的config -> prod.env.js -> module.exports 修改API_ROOT

配置完成後須要從新編譯一遍

3、接口訪問

1. 在api.js裏增長接口地址

import { get, post } from '../request/http';
const api={
  getScreenList:'/getScreenList', //接口名稱
}
export default api
export const getScreenList = params => get(api.getScreenList, params);
複製代碼

2. 利用promise訪問接口

import { getScreenList} from '@/request/api';

export default {
    mounted(){
      console.log('測試--')
      this.getScreenList();
    },
    methods:{
      async getScreenList(){
        let params={};
        await getScreenList(params).then(res => {
          console.log('訪問成功');
        })
      }
    },
}
複製代碼