技術標籤：前端技術跨域vuevue-cli3

跨域

在vue根性到3.0以上時，跨域檔案的位置也發生了變化，需要在src同級目錄下新建一個vue.config.js檔案
其中寫入跨域webpack和跨域的配置。之前也在網上找了許多，發現有些有個別字段有問題導致無法使用
就把自己用的發出來對比對比
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20210202112214445.png#pic_center)

注意時在專案資料夾中與src資料夾同級

配置

下面就把跨域的具體配置發出來，這只是跨域的，並不包含webpack

module.exports = {
  // 配置跨域代理
    devServer: {
        // Paths
        host: 'localhost',
        port: '8080',
        https: false,
        open: true,
        proxy: {
          '/api': { // 匹配所有以 '/api'開頭的請求路徑
            target: 'http://www.baidu.com:2300', // 代理目標的基礎路徑
            changeOrigin: true, // 支援跨域
            pathRewrite: {// 重寫路徑: 去掉路徑中開頭的'/api'
              '^/api': ''
            }
          }
        }
    }
}
 

在頁面當中的使用方式：

this.$http.get("/api/getdata")	//這裡api就會被替換成你配置的地址 如：http://www.baidu.com:2300