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

更新时间：2020年11月10日 11:43:11 作者：青衣浏阳

这篇文章主要介绍了vue 项目中浏览器跨域的配置问题,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

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 浏览器跨域配置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

基于vue 动态菜单刷新空白问题的解决
这篇文章主要介绍了基于vue 动态菜单刷新空白问题的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
vue中集成省市区街四级地址组件的实现过程
我们在开发中常会遇到选择地址的需求,有时候只需要选择省就可以,有时候则需要选择到市、县,以至于乡镇，甚至哪个村都有可能,下面这篇文章主要给大家介绍了关于vue中集成省市区街四级地址组件的相关资料,需要的朋友可以参考下
2022-12-12
vite+vue3+tsx项目打包后动态路由无法加载页面的问题及解决
这篇文章主要介绍了vite+vue3+tsx项目打包后动态路由无法加载页面的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
Vue3中使用ref标签对组件进行操作方法
这篇文章主要介绍了Vue3中使用ref标签对组件进行操作方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-04-04
vue 过滤器和自定义指令的使用
本文主要介绍Vue.js中过滤器和自定义指令相关的知识点，包括过滤器的定义方式，和使用方法，以及自定义指令的概念和注册方式。
2021-05-05
vue引用外部JS并调用JS文件中的方法实例
我们在做vue项目时,经常会需要引入js,下面这篇文章主要给大家介绍了关于vue引用外部JS并调用JS文件中的方法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-02-02
vue传值的编码和解码方式
这篇文章主要介绍了vue传值的编码和解码方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-07-07
vue通知提醒消息举例详解
在项目开发过程中,可能需要实现以下场景,未读消息提示、报警信息、消息通知等,下面这篇文章主要给大家介绍了关于vue通知提醒消息的相关资料,需要的朋友可以参考下
2023-03-03
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
这篇文章主要介绍了vue App.vue里的公共组件改变值触发其他组件或.vue页面监听,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-05-05
vue权限问题的完美解决方案
今天来说说权限管理，因为网上已经有很多关于这方面的很多内容，下面这篇文章主要给大家介绍了关于vue权限问题的完美解决方案，需要的朋友们下面来一起学习学习吧
2019-05-05