vue代码如何跟后端代码结合_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

前端小白，欢迎交流