关于vue 项目中浏览器跨域的配置问题


Posted in Javascript onNovember 10, 2020

1、什么是跨域
当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。

2、同源策略
同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。

3、在项目中配置
打开项目找到config文件下的index.js,在js proxyTable中配置跨域,代码如下

proxyTable: {
   '/api': {
     target: 'http://***.com',//你要跨域的网址
    secure: true, 
    changeOrigin: true,
    pathRewrite: {
     '^/api': '/api'
    }
   }
  }

target: 你要跨域的网址
secure:如果是https接口,需要配置这个参数
changeOrigin : 这个参数是用来回避跨站问题的,配置完之后发请求时会自动修改http header里面的host,但是不会修改别的.
pathRewrite:重写
“ ‘^/api': ‘/api'” 这里的配置是正则表达式,以/api开头的将会被用用‘/api'替换掉,假如后台文档的接口是 /api/list/xxx
前端api接口写:axios.get('/api/list/xxx') , 被处理之后实际访问的是:http://news.baidu.com/api/list/xxx

总结

到此这篇关于关于vue 项目中浏览器跨域的配置问题的文章就介绍到这了,更多相关vue 浏览器跨域配置内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript 文件的同步加载与异步加载实现原理
Dec 13 Javascript
javascript实现文本域写入字符时限定字数
Feb 12 Javascript
8个超实用的jQuery功能代码分享
Jan 08 Javascript
12行javascript代码绘制一个八卦图
Apr 02 Javascript
javascript jquery对form元素的常见操作详解
Jun 12 Javascript
JavaScript类的写法
Sep 17 Javascript
正则表达式替换html元素属性的方法
Nov 26 Javascript
详解前后端分离之VueJS前端
May 24 Javascript
Nuxt.js实现一个SSR的前端博客的示例代码
Sep 06 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
Sep 18 Javascript
js实现简单五子棋游戏
May 28 Javascript
JS实现京东商品分类侧边栏
Dec 11 Javascript
如何在vue 中引入使用jquery
Nov 10 #jQuery
Vue + ts实现轮播插件的示例
Nov 10 #Javascript
vue router返回到指定的路由的场景分析
Nov 10 #Javascript
如何将Node.js中的回调转换为Promise
Nov 10 #Javascript
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
Nov 09 #Javascript
jquery实现加载更多"转圈圈"效果(示例代码)
Nov 09 #jQuery
夯基础之手撕javascript继承详解
Nov 09 #Javascript
You might like
PHP模拟post提交数据方法汇总
2016/02/16 PHP
php metaphone()函数及php localeconv() 函数实例解析
2016/05/15 PHP
JS 自动完成 AutoComplete(Ajax 查询)
2009/07/07 Javascript
初学js 新节点的创建 删除 的步骤
2011/07/04 Javascript
浅谈JavaScript事件的属性列表
2015/03/01 Javascript
Backbone.js的一些使用技巧
2015/07/01 Javascript
Nginx上传文件全部缓存解决方案
2015/08/17 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
2016/02/14 Javascript
JavaScript中常用的验证reg
2016/10/13 Javascript
Jquery树插件zTree实现菜单树
2017/01/24 Javascript
表格展示利器 Bootstrap Table实例代码
2017/09/06 Javascript
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
2017/09/26 Javascript
用jquery获取select标签中选中的option值及文本的示例
2018/01/25 jQuery
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
2018/08/20 Javascript
JavaScript实现页面中录音功能的方法
2019/06/04 Javascript
微信小程序实现日期格式化和倒计时
2020/11/01 Javascript
Vue 3.0 全家桶抢先体验
2020/04/28 Javascript
用 Python 爬了爬自己的微信朋友(实例讲解)
2017/08/25 Python
Python实现针对给定单链表删除指定节点的方法
2018/04/12 Python
TensorFlow Session会话控制&Variable变量详解
2018/07/30 Python
在scrapy中使用phantomJS实现异步爬取的方法
2018/12/17 Python
Python中单线程、多线程和多进程的效率对比实验实例
2019/05/14 Python
pandas通过字典生成dataframe的方法步骤
2019/07/23 Python
Python使用Slider组件实现调整曲线参数功能示例
2019/09/06 Python
Python操作Mongodb数据库的方法小结
2019/09/10 Python
Python计算机视觉里的IOU计算实例
2020/01/17 Python
windows下的pycharm安装及其设置中文菜单
2020/04/23 Python
Python调用REST API接口的几种方式汇总
2020/10/19 Python
css图标制作教程制作云图标
2014/01/19 HTML / CSS
CSS3 对过渡(transition)进行调速以及延时
2020/10/21 HTML / CSS
详解html5 shiv.js和respond.min.js
2018/01/24 HTML / CSS
毕业生的自我鉴定
2013/10/29 职场文书
乡镇干部个人对照检查材料(群众路线)
2014/09/26 职场文书
个人剖析材料范文
2014/09/30 职场文书
Python的flask接收前台的ajax的post数据和get数据的方法
2021/04/12 Python
比较node.js和Deno
2021/04/27 Javascript