码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-11-09 20:53:59      阅读:690      评论:0      收藏:0      [点我收藏+]

标签:一个   wamp   解决方法   blog   pwd   pac   html   word   ble   

一、问题描述

前端: 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请求跨域问题

标签:一个   wamp   解决方法   blog   pwd   pac   html   word   ble   

原文地址:http://www.cnblogs.com/jiumengmeng/p/7810974.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!