一、問題描述

前端： webpack + vue + axios

後端： wamp + php

用webpack訪問前端頁面是需要一個端口的，後端服務器也是需要一個端口的，端口不同，在本地調試接口就出現問題。

二、解決方法(不使用jsonp)

　　1）安裝 proxy-middleware 插件

　　　 npm install proxy-middleware --save-dev

　　2）將項目目錄下 build 文件夾下 dev-sever.js 中的 proxyMiddleware 改名為 httpProxyMiddleware，並將此文件中所有 proxyMiddleware 替換為 httpProxyMiddleware，

　　 並在此文件夾中引入proxy-middleware 插件：

　　　 const proxyMiddleware = require(‘proxy-middleware‘)

　　3）註釋原來的 proxyMiddleware 創建的 middleware的代碼

Object.keys(proxyTable).forEach(function (context) {
  let options = proxyTable[context]
  if (typeof options === ‘string‘) {
    options = { target: options }
  }
  app.use(httpProxyMiddleware(options.filter || context, options))
})

　　4）在註釋掉的代碼後面添加如下代碼

app.use(‘/api‘, proxy(url.parse(‘https://example.com/endpoint‘)));
//現在請求 ‘/api/x/y/z‘ 就會轉發到 ‘https://example.com/endpoint/x/y/z‘

//示例代碼
//this.$axios.post(‘/api/admin/login‘, {username: this.account, password: this.pwd}).then(function (res) {
//     console.log(res)
//})

三、參（抄）考（的）鏈（誰）接（的）

https://www.cnblogs.com/strinkbug/p/5808984.html

前端小白，歡迎交流

webpack + vue 向本地後端發送http請求跨域問題