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

一、問題描述

前端： 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

 

四、還聽過其他的方法，但是沒親測過，后來到的公司都是后端解決的跨域問題的

 

前端小白，歡迎交流