关于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-cli3项目引入Typescript的实现方法

    Vue-cli3项目引入Typescript的实现方法

    这篇文章主要介绍了Vue-cli3项目引入Typescript的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • vue-cli随机生成port源码的方法

    vue-cli随机生成port源码的方法

    这篇文章主要介绍了vue-cli随机生成port源码的方法,文中给大家介绍了vue 随机色生成方法,需要的朋友可以参考下
    2019-09-09
  • 详解在vue开发中如何利用.env文件

    详解在vue开发中如何利用.env文件

    我们在 vue 项目的目录中经常看到 env 开头的文件,在文件内声明一些变量,这些变量就是一些配置变量,在不同环境下可使用的变量,本文我们将给大家介绍在vue开发中如何利用.env文件,需要的朋友可以参考下
    2023-10-10
  • vue中的主动触发点击事件

    vue中的主动触发点击事件

    这篇文章主要介绍了vue中的主动触发点击事件,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • 深入浅析Vue中的slots/scoped slots

    深入浅析Vue中的slots/scoped slots

    这篇文章主要介绍了Vue中的slots/scoped slots,本文实例代码相结合的形式给大家介绍了slots的工作原理,需要的朋友可以参考下
    2018-04-04
  • vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作

    vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作

    这篇文章主要介绍了vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue实现简单分页功能

    vue实现简单分页功能

    这篇文章主要为大家详细介绍了vue实现简单分页功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • Vue echarts绘制甘特图的示例代码

    Vue echarts绘制甘特图的示例代码

    甘特图是一种条状图,直观展示项目进展随时间的走势及联系,其中,项目时间由横轴表示,项目活动由纵轴表示,本文给大家介绍了Vue echarts绘制甘特图的实现方法,并有详细的代码示例供大家参考,需要的朋友可以参考下
    2024-03-03
  • vue3获取ref实例结合ts的InstanceType问题

    vue3获取ref实例结合ts的InstanceType问题

    这篇文章主要介绍了vue3获取ref实例结合ts的InstanceType问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • 详解Vue如何支持JSX语法

    详解Vue如何支持JSX语法

    这篇文章主要介绍了详解Vue如何支持JSX语法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11

最新评论