webpack + vue 向本地后端发送http请求跨域问题

Posted 2020-10-13 九萌萌

一、问题描述

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

 

四、还听过其他的方法，但是没亲测过，后来到的公司都是后端解决的跨域问题的

 

前端小白，欢迎交流