Vue-cli创建项目从单页面到多页面4 - 本地开发服务器设置代理

Posted Silence

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue-cli创建项目从单页面到多页面4 - 本地开发服务器设置代理相关的知识,希望对你有一定的参考价值。

前后端分离开发时,有时候会遇到跨域的情况:只在开发的时候存在跨域,项目上线后,由于配置的域名相同,跨域就会不存在。

这个时候,有两种方案可以比较快的解决:
1、利用h5的特性,使用cors,在ngnix服务器上设置header:Access-Control-Allow-Origin的值为 *(或者目标域名)允许跨域。

2、在我们的本地开发服务器上设置代理。

这里主要介绍使用vue-cli创建项目后,怎样配置本地服务器的代理,成功通过本地服务器代理请求数据的解决方案。

解决方案

进入config/index.js中,在dev属性中添加proxyTable的设置。
假设我现在需要将我本地的http://localhost:8080/somepath代理到目标地址http://a.b.com/otherpath 下,那么我就可以这样做:

module.exports= {
  dev: {
    proxyTable: {
	  \'/somepath\': {
	    target: \'http://a.b.com\',
		changeOrigin: true,
		pathRewrite: {
		  \'^/somepath\': \'/otherpath\'
		}
	  }
	}
  }
}

我的vue多页面系列的其他博客链接:

Vue-cli创建项目从单页面到多页面

Vue-cli创建项目从单页面到多页面2-history模式

Vue-cli创建项目从单页面到多页面3-关于将打包后的项目文件不放在根目录下

以上是关于Vue-cli创建项目从单页面到多页面4 - 本地开发服务器设置代理的主要内容,如果未能解决你的问题,请参考以下文章

在服务器上部署Flask代码(从单进程到多进程)

vue-cli 通过UI页面创建项目

vue多页面项目搭建(vue-cli 4.0)

IDEA vue-cli4项目打包上传服务器页面空白新增config.js解决

vue-cli创建的项目,配置多页面的实现方法

java从单线程到多线程