vue-cli 本地环境 API 代理设置和解决跨域
前言
我们在使用 vue-cli 启动项目的时候npm run dev便可以启动我们的项目了,通常我们的请求地址是以 localhost: 来请求接口数据的,localhost 是没有办法设置 cookie 的。 我们可以在 vue-cli 配置文件里面设置一个代理,跨域的方法有很多,通常需要后台来进行配置。我们可以直接通过 node.js 代理服务器来实现跨域请求。 vue proxyTable 接口跨域请求调试
在 vue-cli 项目中的config文件夹下的index.js配置文件中,dev长这样子: dev: {
env: require('./dev.env'),
port: ,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
cssSourceMap: false
}
服务器提供的接口如果长这样https://www.exaple.com/server_new/login,我们把域名提取出来如https://www.exaple.com; 在 config 中新建一个文件命名为proxyConfig.js: module.exports = {
proxy: {
'/apis': { //将www.exaple.com印射为/apis
target: 'https://www.exaple.com', // 接口域名
changeOrigin: true, //是否跨域
pathRewrite: {
'^/apis': '' //需要rewrite的,
}
}
}
}
config文件夹下的index.js引入proxyConfig.js: var proxyConfig = require('./proxyConfig')
config文件夹下的index.js中的dev改成: dev: {
env: require('./dev.env'),
port: ,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: proxyConfig.proxy,
cssSourceMap: false
}
重启项目npm run dev: 你会发现出现了这个 img 这个时候我们已经设置好了本地 API 代理了 修改本地hosts文件
文件路径一般是C:\Window\System32\drivers\etc,打开hosts文件,在这一段下面把localhost设置进去 # localhost name resolution is handled within DNS itself.
# 127.0.0.1 localhost
# :: localhost
127.0.0.1 activate.adobe.com
127.0.0.1 practivate.adobe.com
127.0.0.1 lmlicenses.wip4.adobe.com
127.0.0.1 lm.licenses.adobe.com
127.0.0.1 na1r.services.adobe.com
127.0.0.1 hlrcv.stage.adobe.com localhost www.exaple.com
搞定
此时我们已经完全解决了跨域问题,以及本地测试后台无法向我们本地环境设置cookie的情况了。 本文作者: IIsKei
本文链接: http://www.iskei.cn/posts/48205.html
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处!
vue-cli 本地环境 API 代理设置和解决跨域的更多相关文章
- vue 本地环境API代理设置和解决跨域
写一个config.js文件,作为项目地址的配置. //项目域名地址 const url = 'https://exaple.com'; let ROOT; //由于封装的axios请求中,会将ROO ...
- vue-cli本地环境API代理设置和解决跨域
前言 我们在使用vue-cli启动项目的时候npm run dev便可以启动我们的项目了,通常我们的请求地址是以localhost:8080来请求接口数据的,localhost是没有办法设置cooki ...
- Web API中使用CORS解决跨域
Web API中使用Cros解决跨域 如果两个页面的协议,端口和域名都相同,则两个页面具有相同的源,注:IE不考虑端口,同源策略不会阻止浏览器发送请求,但是它会阻止应用程序看到响应.如下图所示 COR ...
- NodeJS设置Header解决跨域问题
转载: NodeJS设置Header解决跨域问题 app.all('*', function (req, res, next) { res.header('Access-Control-Allow-O ...
- nginx 前后端分离 代理转发,解决跨域问题
场景 适用于公司有前端,项目采用前后端分离.类似于我们 后端 springboot 提供接口,前端专门写html调用相应的接口,解决跨域问题 配置说明 worker_processes 1; even ...
- express 设置header解决跨域问题
//设置跨域访问 app.all('*', function(req, res, next) { res.header("Access-Control-Allow-Origin", ...
- vue+java后台通信报403,cors解决跨域问题(该贴说的不是很清楚,不过大概如此,可再去网上查相关内容)
前端是vue2.0,网络请求用的是axios,后端是springboot2.0 用axios向后端发送post请求,结果得到一个403无权限的错误,莫名其妙啊,我明明发送的是post请,但在chrom ...
- 设置chrome解决跨域问题
开发中遇到跨域问题, 解决方法一 以关闭安全验证模式启动chrome,就不会报跨域了 开发阶段,用这个方式是可以的,不然他需要后台配置成 * , 发布会有风险 设置方法: --disable-w ...
- vue 前端反向代理后台,解决跨域问题
// 和 src 同层的 config 文件夹下的 index.js dev 里面的 // Paths assetsSubDirectory: 'static', assetsPubl ...
随机推荐
- 1.springboot+ActiveMQ
1.项目结构如下 pom.xml文件如下 <dependencies> <dependency> <groupId>junit</groupId> &l ...
- D3.js比例尺 定量比例尺 之 线性比例尺(v3版本)
定量比例尺 : 数学上有函数的概念,不是编程中所说的函数,如线性函数.指数函数.对数函数等,而指的是一个量随着另一个量的变化而变化.例如有一下线性函数 : y=2x+1该函数在二维坐标系中绘制出来的图 ...
- java笔试之从单向链表中删除指定值的节点
输入一个单向链表和一个节点的值,从单向链表中删除等于该值的节点,删除后如果链表中无节点则返回空指针. 链表的值不能重复 构造过程,例如 1 -> 2 3 -> 2 5 -> 1 4 ...
- Windows中的"簇"和Linux中的"块"是对应的
扇区是对硬盘而言,块是对文件系统而言. 簇”又称为“分配单元” ,文件系统是操作系统与驱动器之间的接口,当操作系统请求从硬盘里读取一个文件时,会请求相应的文件系统(FAT 16/32/NTFS)打开文 ...
- python中的OrderedDict
该类型存放顺序和添加顺序一致,比如逐个赋值,但和dict直接转化过去的顺序不一定一样. d1 = collections.OrderedDict() d1['b'] = 'B'd1['a'] = 'A ...
- 廖雪峰Java16函数式编程-1Lambda表达式-3方法引用
Java8引入了Lambda表达式,可以不必编写FunctionalInterface的实现类,直接写Lambda表达式.除了Lambda表达式,我们还可以直接传入方法引用 方法引用是指:如果某个方法 ...
- Responder对象
Responder对象 响应者是一个对象,它可以响应事件并处理它们.所有响应者对象是类的,最终从UIResponder的( IOS)或NSResponder ( OS X)继承实例.这些类声明一个编程 ...
- MySql查询分页数据
MySql查询分页数据
- VS2010-MFC(常用控件:按钮控件的编程实例)
转自:http://www.jizhuomi.com/software/184.html 因为Button控件在前面的例子中涉及到了,比较简单,本文就不作深入分析了,而是重点讲解单选按钮Radio B ...
- 小程序跳坑 --- navigator 和 API中wx.系列的跳转(如 wx.navigateTo、wx.reLaunch等)
工作之余,想着帮老妈开发个小程序,一是宣传一下她的业务,二是学习使用一下微信小程序的开发,哈哈.在此过程中遇到了navigator跳转的问题,最终还是成功解决了,下面就记录下来,并做个系列总结以作记录 ...