前端跨域,本地跨域,vue项目跨域问题
疑问1:
- 前端开发中解决浏览器的跨域问题 (推荐阅读)
- 什么是跨域?
- 为什么要跨域?
- 解决“跨域”的五种常见方式:
1. JSONP
2. CORS跨域资源共享
3. http proxy代理跨域(利用Webpack配置):推荐使用。
疑问2:
- 什么是“代理跨域” ?
- 浏览器之间有
CORS同源策略
。因出于安全考虑,不同域之间不允许获取数据。- (除了几个特殊的例子
<img>
、<script>
、<audio>
等标签可以进行跨域。但通常都是以get
形式请求,如果用js
的axios
去远程获取数据的话,就会触发CORS同源策略的约束机制,除非你服务端的代码设置了header请求头并同意让你访问)- 现在不是都流行前后端的分离。如若后端代码跑掉了,就只剩下前端了,两个世界的代码,让前端怎么获取呢?!
感觉使用跨域好麻烦好难搞啊还不一定搞得到,
- 这个时候就可以用到代理跨域了
- “代理跨域” 的原理又是如何?
- 所谓代理,就是代替前端而是用后端发出http请求,就如vue的脚手架中,要运行项目你要输入npm run dev或npm run start吧,这个命令其实打开它已经配置好的node服务器,vue脚手架的代理就是通过node来代替前台发起http请求,
- 既然不是浏览器发起的请求那不是就很容易啦?
疑问2原文地址:vue 设置 proxyTable 参数进行代理跨域
vue脚手架是如何是实现代理跨域的?
找到配置文件:
找到项目文件夹目录:
-
项目文件夹/config/index.js
文件, -
文件中有个
dev
,在里面找到proxyTable{}
-
按如下截图(参数介绍),设置即可。
截图:
.
-
开始调用,并发起请求
//然后我们引入一个ajax的包axios并进行ajax请求: import axios from 'axios' axios.get('/getDataLists').then(()=>{})
-
代码执行后,会自动帮你跨域并获取到
https://www.xxx.com/jobs-api/getDataLists
返回的数据。
以上就是关于“ vue跨域问题:proxy代理跨域” 的全部内容。