Vue中跨域及打包部署到nginx跨域设置方法

Vue中跨域及打包部署到中跨域及打包部署到nginx跨域设置方法跨域设置方法

主要介绍了Vue中跨域以及打包部署到nginx跨域设置方法，本文通过实例代码给大家介绍的非常详细，具有一

定的参考借鉴价值,需要的朋友可以参考下

众所周知,我们在做前后端分离项目的时候,经常需要在本地起前端工程,接口希望拉取服务端的实际数据而不是本地的mock数

据,而如果本地程序直接访问远程接口， 肯定会遇到跨域问题。

什么是跨域什么是跨域?实现跨域的多种方式实现跨域的多种方式?

这里我就不详细介绍了,大家自行百度哈

为什么要实现前端跨域为什么要实现前端跨域

// Paths

assetsSubDirectory: 'static',

assetsPublicPath: '/',

<!-- 使用proxyTable进行跨域设置 -->

proxyTable: {

'/api': {

target: 'http://www.abc.com', // 设置你调用的接口域名和端口号, 别忘了加http

changeOrigin: true, // 是否跨域

pathRewrite: {

// 这里理解成用'/api'代替target里面的地址，后面组件中我们掉接口时直接用api代替

host: '0.0.0.0', // can be overwritten by process.env.HOST

port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined

autoOpenBrowser: false,

errorOverlay: true,

notifyOnErrors: true,

poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

/**

* Source Maps

*/

// https://webpack.js.org/configuration/devtool/#development

},

上面proxyTable属性中的配置,效果就是将本地8080端口的一个请求代理到了http://www.abc.com这个域名下

'http://localhost:8080/api' ===> 'http://www.abc.com/'

注意: 以上设置只能在开发环境下使用,打包后会出现路径问题的 注意: Vue-cli提供的代理功能，只是让你在开发环境下使用

的，它(http-server-middleware)依赖于node环境，生产代码应该使用npm run build然后把dist放到nginx服务器上，在nginx上配

置代理地址 Vue项目部署到nginx上的跨域设置

这还没完，现在我们要将项目部署到nginx上，此时原来可以访问的接口又访问不到了，所以这个时候还要对nginx进行设置。

windows系统下载nginx 下载地址: nginx.org/en/docs/win…

选择download进去选择下载版本页面