vue项目开发时怎么解决跨域
vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报“No 'Access-Control-Allow-Origin' header is present on the requested resource.” 这种跨域错误。
要想本地正常的调试,解决的办法有三个:
一、关闭谷歌浏览器的同源策略,这样就不存在跨域问题了。
window
- 新建一个 chrome.exe 的快捷方式, 并且关闭所有的chrome浏览器
- 设置参数,关闭 同源策略
--args --disable-web-security
- 打开chrome浏览器之后效果如下
mac
//chrome 浏览器
open -a "Google Chrome" --args --disable-web-security --user-data-dir
//safari 浏览器
open -a '/Applications/Safari.app' --args --disable-web-security --user-data-dir
linux
chromium-browser --disable-web-security
二、使用http-proxy-middleware 代理解决(项目使用vue-cli脚手架搭建)
例如请求的url:“http://l-test12.dev.cn2.corp.agrant.cn:8080/api/auth/login”
1、打开config/index.js,在proxyTable中添写如下代码:
proxyTable: {
'/newretail': {
target: 'http://l-test12.dev.cn2.corp.agrant.cn:8080', //源地址
changeOrigin: true, //改变源
pathRewrite: {
'^/newretail': 'http://l-test12.dev.cn2.corp.agrant.cn:8080' //路径重写}}
}
这样就可以啦,
使用axios请求数据时直接使用‘/newretail’
getData () {
axios.get('/newretail/api/auth/login', function (res) {//实际请求的是“http://l-test12.dev.cn2.corp.agrant.cn:8080/api/auth/login”
console.log(res)
})
}
2.由于这个代理其实就是在本地起个node服务,相当于在本地起个后台,然后localhose8080,例如你在你电脑上开发,你页面的请求是发送给本地的node的,然后你node再去发送请求到测试环境,所以你把代码部署到线上跟测试服务器上的时候,代理其实就不起作用了,那么按照上面的写法实际请求的其实就是'/newretail/api/auth/login',所以我们用axios封装请求的时候需要判断一下:
let baseURL const env = process.env.NODE_ENV//node的api,用来判断当前处于什么环境 switch (env) {
case 'development':
baseURL = ''
break
case 'test':
baseURL = 'http://l-test12.dev.cn2.corp.agrant.cn:8080'
break
case 'production':
baseURL = 'http://webapi.prod.qd1.corp.agrant.cn:8080'
break
} export { baseURL }
或者
let serverUrl = '/newretail/' //本地调试时
// let serverUrl = 'http://l-test12.dev.cn2.corp.agrant.cn:8080/' //打包部署上线时
export default {
dataUrl: serverUrl + 'api/auth/login'
}
扩展
命令行执行的文件(我这个是配置多个跨域地址,使用命令启动不同的跨域地址)
process.argv
属性返回一个数组,这个数组包含了启动Node.js进程时的命令行参数。第一个元素为process.execPath
。如果需要获取argv[0]
的值请参见node文档的 process.argv0
。第二个元素为当前执行的JavaScript文件路径。剩余的元素为其他命令行参数。(主要获取命令行参数)
proxyTable: {
最新文章
- 关于HTML5的拖拽
- git中的版本库,暂存区和工作区
- SQL Server 扩展一个支持类似。net 时间格式化的标量函数~
- WampServer下使用多端口访问
- javascript检验工具的比较
- 安装和删除 Alcatraz 插件
- C++多态性的浅析
- tomcat 默认项目设置
- YII千万级PV架构经验分享--俯瞰篇--性能介绍
- createSQLQuery与createQuery的区别
- 03-IOSCore - XML及解析、Plist
- php计算几分钟前、几小时前、几天前的几个函数分享
- 使用VSCode和VS2017编译调试STM32程序
- Capsules for Object Segmentation(理解)
- Web高级 HTTP报文
- 初学ubuntu命令
- 归并排序/合并排序c++实现
- C#中的Dictionary类,默认key是区分大小写的
- 下拉刷新和UITableView的section headerView冲突的原因分析与解决方案
- MYSQL-----流程控制 if() 函数的用法
热门文章
- 2018-2019-2 20175235 实验二《Java面向对象程序设计》实验报告
- selenium采用xpath方法识别页面元素
- 开头不讲";Hello Word";,读尽诗书也枉然 : Word 操作组件介绍 - Spire.Doc (转)
- java程序员技术范围
- m3u8下载转码一次完成
- nginx,作为前端的你会多少?
- git在项目中的实际运用
- 浅谈rest風格的接口开发
- Bootstrap-datepicker3官方文档中文翻译---Event/事件(原文链接 http://bootstrap-datepicker.readthedocs.io/en/latest/index.html)
- Spark SQL UDF示例