代码成就万世基积沙镇海,梦想永在凌云意|

又一岁荣枯

园龄:3年4个月粉丝:11关注:6

vue访问出现跨域错误

报错Access to XMLHttpRequest at 'http://localhost:82/checkitem/findAll.do' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

问题:

因为浏览器的同源策略的限制问题(协议、主机、端口一致),浏览器访问非同源的网址时,会出现无法获取数据(已发请求,服务器已收到请求),出现跨域问题

3种解决方法

1、cors跨域(配置服务器) :

全称 “跨域资源共享”,原理:它允许浏览器向跨源服务器,发出XMLHttpRequest请求(配置响应头Accesse-Control-Allow-Origin:"*",违背任意一条同源策略都能访问响应数据),从而克服了AJAX只能同源使用的限制。
缺点:这样会造成任何人都能向这台服务器要数据。

2、jsonp跨域:

原理:动态生成script标签,通过src引入接口地址(因为src不存在跨域的);请求数据类型dataType为jsonp,缺陷只支持get请求,且存在一些安全隐患

3、代理服务器:

借助vue-cli脚手架开启代理服务器,在vue.config.js文件中配置proxy,原理:先请求本地服务器,本地服务器再去请求真正的后台服务器,最后本地服务器再将请求回来的数据返回给浏览器(本地服务器跟浏览器之间不存在跨域)
配置多个代理代码:

devServer: {
    proxy: {
   //灵活代理;请求前缀为/api时,走下面的代理
      '/api': {
        target: 'url',//代理服务器把请求转发给url(真正的后台服务器)
        ws: true,//用于支持websocket
        changeOrigin: true,//用于控制请求头中的host值
        //真正的服务器没有/api,所以要重写路径置空,否则找不到相应的路径
        pathRewrite: {
        //匹配以api开头的路径置空
           '^api': ''
         }
      },
   //配置多个代理;请求前缀为/demo时,走下面的代理
       '/demo': {
        target: 'url2',//代理服务器把请求转发给url2(真正的后台服务器)
        ws: true,//用于支持websocket
        changeOrigin: true,//用于控制请求头中的host值
        //真正的服务器没有/api,所以要重写路径置空,否则找不到相应的路径
        pathRewrite: {
        //匹配以api开头的路径置空
           '^demo': ''
         }
      },
    }
  }

本文作者:又一岁荣枯

本文链接:https://www.cnblogs.com/java-six/p/16516547.html

版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   又一岁荣枯  阅读(1324)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示
评论
收藏
关注
推荐
深色
回顶
收起