node代理请求 vue_vue-cli项目开发/生产环境代理实现跨域请求+webpack配置开发/生产环境的接口地址...
使用 Vue-cli 创建的项目,开发地址是 localhost:8080,需要访问非本机上的接口http://10.1.0.34:8000/queryRole。不同域名之间的访问,需要跨域才能正确请求。跨域的方法很多,通常都需要后台配置,不过 Vue-cli 创建的项目,可以直接利用 Node.js 代理服务器,通过修改vue proxyTable接口实现跨域请求。在vue-cli项目中的config文件夹下的index.js配置文件中,修改前的dev:
dev: {
env: require('./dev.env'),
port:8080,
autoOpenBrowser:true,
assetsSubDirectory:'static',
assetsPublicPath:'/',
proxyTable: {},
cssSourceMap:false}
只要修改里面的proxyTable: {}项
proxyTable: {'/api': { //代理地址
target: 'http://10.1.0.34:8000/', //需要代理的地址
changeOrigin: true, //是否跨域
secure: false,
pathRewrite: {'^/api': '/' //本身的接口地址没有 '/api' 这种通用前缀,所以要rewrite,如果本身有则去掉
}
}
}
然后重启项目npm run dev
请求数据时URL前加上“/api”就可以跨域请求了
self.$axios.get('/api/queryRole', {params: params})
.then((res)=>{
console.log(res);
}).catch((err) =>{
console.log(err);
})
1、参数proxyTable详解:
vue-cli的config文件里的参数:proxyTable,这个参数主要是一个地址映射表,你可以通过设置将复杂的url简化,例如我们要请求的地址是api.xxxxxxxx.com/list/1,可以按照如下设置:
proxyTable: {
'/list': { target: 'http://api.xxxxxxxx.com', pathRewrite: { '^/list': '/list'} } }
这样我们在写url的时候,只用写成/list/1就可以代表api.xxxxxxxx.com/list/1.
那么又是如何解决跨域问题的呢?其实在上面的'list'的参数里有一个changeOrigin参数,接收一个布尔值,如果设置为true,那么本地会虚拟一个服务端接收你的请求并代你发送该请求,这样就不会有跨域问题了,当然这只适用于开发环境。增加的代码如下所示:
proxyTable: {
'/list': { target: 'http://api.xxxxxxxx.com', changeOrigin: true, pathRewrite: { '^/list': '/list'} } }
vue-cli的这个设置来自于其使用的插件http-proxy-middleware
深入了解的话可以看该插件配置说明,似乎还支持websocket,很强大的插件。
2、pathRewrite含义
用代理,首先你得有一个标识,告诉他你这个连接要用代理,不然的话,可能你的 html,css,js这些静态资源都跑去代理。所以我们只要接口用代理,静态文件用本地。'/iclient': {}, 就是告诉node,我接口只要是'/iclient'开头的才用代理。所以你的接口就要这么写 /iclient/xx/xx。最后代理的路径就是 http://xxx.xx.com/iclient/xx/xx。可是不对啊,我正确的接口路径里面没有/iclient啊,所以就需要 pathRewrite,用'^/iclient':'', 把'/iclient'去掉,这样既能有正确标识,又能在请求接口的时候去掉iclient。当然如果本身的接口中就有/iclient,那么就可以把pathRewrite这个参数去掉。
二、在生产环境中跨域
设置nginx配置文件:
location /api {
add_header'Access-Control-Allow-Origin' '*';
proxy_pass http://fanyi.baidu.com/v2transapi;
}
三、设置不同的接口地址
平常我们团队开发时都在公司的局域网内,调用接口也是局域网内部的,但是项目上线时,请求接口是线上服务器端的,那么就有接口之间的来回切换问题。
在使用vue-cli搭建项目以后,做相关配置就可以实现,不用手动更改接口路径,也可以请求不同环境下的接口。
1、设置不同的接口地址
先找到以下文件
/config/dev.env.js
/config/prod.env.js
可以看到dev.env.js里面内容如下
这是生产环境的参数配置,然后我们可以再上面文件加入一行代码,如下:这就是本地测试环境请求后台接口的域名
然后找到prod.env.js文件,如下:
我们加入一行代码,如下:这是我们上传服务器以后,请求后台接口的域名
2、在代码中调用设置好的参数:
比如我在本项目中重新封装axios(api文件在/src/api/index.js中),将配置好的接口地址作为baseURL拼接到接口路径中,应用参数部分如下:
最后重新启动项目就可以了,当npm run dev的时候就运行在生产环境,当npm run build的时候就是正式的线上环境。
node代理请求 vue_vue-cli项目开发/生产环境代理实现跨域请求+webpack配置开发/生产环境的接口地址...相关推荐
- Ajax请求成功却执行error回调方法(Ajax跨域请求问题)
遇到的问题描述: Ajax使用post请求添加分组,请求url是RESTful风格.添加成功了已经向数据库写入了信息,但是Ajax却执行了error回调,观察网络发现有两次相同请求一次是get请求,一 ...
- ajax跨域请求时 会出现什么问题,在用AJAX跨域请求时遇到的问题
刚刚接触ajax就遇到一个词--跨域. 在我百度了各种资料以后总结了一句话:"只要不是在一个协议.域.名端口下,都属于跨域(127.0.0.1本地也属于跨域)". 在做ajax请求 ...
- [油猴脚本开发指南]脚本ajax的跨域请求
转载自油猴中文网:bbs.tampermonkey.net.cn 李恒道QQ4548212 油猴中文网bbs.tampermonkey.net.cn TamperMonkey GreaseMonkey ...
- 详解vue项目和普通项目如何解决开发环境与生产环境下的跨域问题
概念: 什么是跨域? 跨域,指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制.所谓同源是指,域名,协议,端口均相同. http://www ...
- Node.JS跨域请求配置方案
今天在用node开发的过程中,再次遇到同源策略的问题: 在客户端调用服务端获取数据时,Chrome 浏览器中报错如下: Access to XMLHttpRequest at 'http://loca ...
- php 跨域 验证_php 前后端分离开发进行跨域请求时ajax发送验证参数token的header头解决方法...
php前后端分离开发中要实现前后端参数信息交互,必须解决token标识验证问题. 步骤如下: 1.前端ajax发送请求时,要设置一个自定义header头.代码如下: $.ajax({ url:&quo ...
- jQuery中的ajax、jquery中ajax全局事件、load实现页面无刷新局部加载、ajax跨域请求jsonp、利用formData对象向服务端异步发送二进制数据,表单序列化(异步获取表单内容)
jQuery中使用ajax: 在jQuery中使用ajax首先需要引入jQuery包,其引入方式可以采用网络资源,也可以下载包到项目文件中,这里推荐下载包到文件中:市面上有多个版本的jQuery库,这 ...
- 详细记录如何在跨域请求中携带cookie
1. 搭建环境 1.生成工程文件 npm init 2.安装 express npm i express --save 3.新增app1.js,开启服务器1 端口:3001 const express ...
- 利用Access-Control-Allow-Origin响应头解决跨域请求
标签:cors 跨域请求 ACAO 2015-11-28 18:53 12103人阅读 评论(0) 收藏 举报 分类: web前端(5) J2EE服务器(2) 传统的跨域请求没有好的解决方案,无 ...
- CORS——跨域请求那些事儿
[本期嘉宾介绍]睿得,具有多年研发.运维.安全等IT相关从业经历.目前从事CDN.存储.视频直播点播的技术支持.喜爱钻研,喜爱编码,喜爱分享. 在日常的项目开发时会不可避免的需要进行跨域操作,而在实际 ...
最新文章
- 这个奇葩打字外设火了,一分钟500词比说话还快,直接被打字比赛禁用
- PHP学习资源收集~
- BestCoder Round #78 (div.2)
- think in java i o_5.[Think in Java笔记]Java IO系统
- SAP Fiori SSL 和 SAML 2.0 配置文档
- 去BAT面试完的Mysql面试题总结(55道)
- docker jenkins 公钥_代码自动发布docker(20.10.1)+k8s(1.20.1)
- 滤波器设计软件_滤波器设计——电路仿真软件的滤波器参数提取(下)
- javascrip学习之 数据类型和变量
- C. Oh Those Palindromes
- 怎样查看sql服务器日志文件,怎么通过sql日志,查看以前执行过的sql语句
- 车规电阻AEC-Q200测试项目及元器件检测设备
- 海洋cms漏洞——search.php
- 计算机由哪几种显卡,各类显卡大比拼,你会选择哪一款显卡使用?
- android从九宫格全屏预览,仿微信朋友圈展示图片的九宫格图片展示控件,支持点击图片全屏预览大图...
- 电脑重装系统忘记备份怎么找回文件
- ps保存的图片找不到ico格式怎么办?
- 关于Facebook发币,FB元老级员工们有话说
- 计算机音乐数字乐谱童话,童话钢琴简谱-数字双手-光良
- 小米手环7添加校园卡(门禁)
热门文章
- UVA785 LA5281 Grid Colouring【DFS】
- Bailian2705 跳绳游戏【序列处理】
- 编程语言入门及进阶、设计模式、面向对象书籍
- 在线算法交互、可视化与演示及应用(caffe 网络配置文件 .prototxt 的可视化)
- python Tricks —— list 镜像复制、list of lists 的 flat
- 数字敏感与数字的研究
- 实用工具网站(经纬度、短链接、图片格式转换、长微博、图片压缩、uuid、繁体字、md5破解)
- matlab 基础 —— 输出相关信息(pause、fprintf)
- 机器学习、深度神经网络的认识与结论
- micropython入门教程-【chocho教程】micropython入门教程一