VUE配置本地代理服务器

还记得自己第一次敲出Hello World的那份兴奋吗？

跨域问题相信大家遇到很多，一般这种问题都是出现在开发阶段调试代码的时候，这种时候前端的我们只有一种方法可以解决，那就是设置proxy。网上说的什么CORS，设置浏览器选项什么的也可以，但是归根到底如果上线之后还存在跨域问题，那就百分之一万是要后端处理的，前端不用研究太多，都是无用功（这篇文是从我身边的一件真实事件衍生出来的，前端和后端争执跨域谁处理，最后打起来了，双双把家还。。离谱。。。）

前面说这么多，目的就是为了让大家分辨好，什么时候需要前端处理跨域，什么时候需要后端处理跨域，还有理解跨域的原理（这个网上自行搜索吧，不再赘述）

我用的是Vue3.0。上代码。

env文件设置

VUE_APP_DATABASEURL= '/api'
VUE_APP_BASE_API='http://www.xpelu.com/index'

vue.config.js设置

module.export = {devServer: {proxy: {'/api': {target: 'yoururl',   // target表示代理的服务器urlchangeOrigin: true, // 开启代理，在本地创建一个虚拟服务端pathRewrite: {"^/api": "/"}}}
}

注意：VUE_APP_DATABASEURL是开发url，VUE_APP_BASE_API是上线url。由于配置了步骤2的代理，会将’/api’转换为本地开启的虚拟服务端。转换之后就不是localhost了，便不存在同源策略，也就没有了跨域的问题~

就可以愉快的写接口了，记得打包的时候把url换回来再打包就好。

let systemUrl = process.env.VUE_APP_BASE_API; //开发url
// let systemUrl = process.env.VUE_APP_DATABASEURL; //上线urlexport const warant = systemUrl + '/quality_assurance/index'
export const index = systemUrl + '/index'
export const form = systemUrl + '/contact/create'
export const article = systemUrl + '/article/detail'

希望本文有帮助到你理解跨域和代理的知识，如果有不对的地方还请大佬们留言下来，非常感谢！peace~

VUE配置本地代理服务器相关推荐

react和vue配置本地代理
React 在react中配置开发环境下的本地代理相对比较简单,直接在package.json文件中修改即可. 但是这样做有其局限性,如果开发中代理多个接口的时候将无法满足需求,我们需要的是下面这种的 ...
Vue项目配置本地访问地址和IP访问地址
Vue项目配置本地访问地址和IP访问地址 1.在config/index.js配置: dev: {host: '0.0.0.0', } 2.在build/webpack.dev.config.js更改 ...
[vue] 分析下vue项目本地开发完成后部署到服务器后报404是什么原因呢？
[vue] 分析下vue项目本地开发完成后部署到服务器后报404是什么原因呢? 1.检查nginx配置,是否正确设置了资源映射条件: 2.检查vue.config.js中是否配置了publicPath ...
NGINX配置邮件代理服务器
NGINX配置邮件代理服务器本文将说明如何将NGINX Plus或NGINX开源配置为邮件服务器或外部邮件服务的代理. 介绍 NGINX可以将IMAP,POP3和SMTP协议代理到承载邮件帐户的上游 ...
No ‘Access-Control-Allow-Origin‘ header is present on the requested resource Vue配置代理解决跨域问题
前言在进行web开发进行数据请求的时候常常会遇到跨域问题导致无法请求数据. 如果采用如下方法向http://localhost:4000服务器发送getStudents进行接口数据请求,在后端没有处 ...
vue配置开发、测试、生产环境（proxy中获取process.env.NODE_ENV）
先是看了这个文章写的如何npm run build 的时候自动配置地址参考文章"vue配置开发.测试.生产环境(不同环境,不同命令)_Amy_cloud的博客-CSDN博客_vue生产环境 ...
vue开发本地调试微信网页授权
vue开发本地调试微信网页授权相关信息: 微信开发者工具 vue-cli3 1.修改hosts文件这里可能会遇到无法修改的问题,可以通过修改权限或管理员权限打开修改修改用户权限的操作如下: 修改 ...
vue查看本地相册_使用Vue.js构建的Google相册相册查看器
vue查看本地相册 google-photos-vue (google-photos-vue) Google Photos album viewer built with Vue.js. 使用Vue. ...
Vue 配置使用 externals 使用cdn减小打包体积 (前端优化)
Vue 配置使用 externals 使用cdn减小打包体积在 vue.config.js 中书写配置 // 引入webpackconst webpack = require('webpack') ...
Vue实战——使用代理服务器解决跨域问题——No‘Access-Control-Allow-Origin‘ header is present on the requested resource
概论: 目录一.跨域问题是怎么产生的 1.1 跨域问题: 1.2 解决办法三.开启代理服务器第一种方式:(存在弊端) 细节问题:(解释两个弊端) 第二种方式:(重要) 配置多个代理一.跨域问题 ...

VUE配置本地代理服务器

VUE配置本地代理服务器相关推荐

最新文章

热门文章