为何出现跨域问题以及解决办法

时间:2021-6-12 作者:qvyue

问题
我们本地调试一般都是 npm run serve,然后打开 本机ip:8080(localhost:8080)对吧,这时候我们要调接口调试,后端的接口的地址可能在测试环境,也可能是自己电脑的 ip,总之不是你的 lcoalhost:8080,那么你调接口就会产生跨域,那么怎么办呢?就需要proxy出场了。
首先,proxyTable是我们在本地开发环境中调试接口用的,目的是为了解决本地跨域的问题,在线上的生产环境是没用的!
问:
为什么开发阶段才需要解决跨域,项目发布到生产环境就proxy的配置就无效了?
答:
同源策略是浏览器需要遵循的标准,而如果是服务器向服务器请求就无需遵循同源策略。
一般前端项目最后都会打包到和接口地址相同的服务器上,此时同源不会出现跨域。并且,前端是无法解决真正的跨域问题的。proxy根本不能解决跨域,最终要跨域还是要后端配合。proxy只是前端在开发的时候,方便开发使用的东西而已,打包后就无效了。

vue-cli的proxyTable用的是http-proxy-middleware,它是http代理中间件,它依赖node.js,基本原理是用服务端代理解决浏览器跨域。
该中间件本质上是在本地开了一个服务器dev-server,所有的请求都通过这里转发出去,即把浏览器的发送请求代理转发到代理服务器上,再由代理服务器发送请求给目标服务器,从而解决跨域问题。

原理
vue 中的 proxy 就是利用了 Node 代理,原理还是因为服务器端没有跨域这一说嘛,也是用了这么一个插件 地址。

跨域之proxyTable——在开发和生产环境的不同配置:
https://blog.csdn.net/bonjourjw/article/details/95058069

为何出现跨域问题以及解决办法
image.png

Node中间件代理(两次跨域)
代理服务器,需要做以下几个步骤:

  • 接受客户端请求 。

  • 将请求 转发给服务器。

  • 拿到服务器 响应 数据。

  • 将响应 转发给客户端。

    为何出现跨域问题以及解决办法
    image.png

nginx反向代理
实现原理类似于Node中间件代理,需要你搭建一个中转nginx服务器,用于转发请求。

使用nginx反向代理实现跨域,是最简单的跨域方式。只需要修改nginx的配置即可解决跨域问题,支持所有浏览器,支持session,不需要修改任何代码,并且不会影响服务器性能。

实现思路:通过nginx配置一个代理服务器(域名与domain1相同,端口不同)做跳板机,反向代理访问domain2接口,并且可以顺便修改cookie中domain信息,方便当前域cookie写入,实现跨域登录。
配置nginx代理:https://blog.csdn.net/chpswg/article/details/105368938

————————————————

复习一下跨域的解决方案
jsonp
cors
Node中间件代理(两次跨域)
nginx反向代理

CORS支持所有类型的HTTP请求,是跨域HTTP请求的根本解决方案
JSONP只支持GET请求,JSONP的优势在于支持老式浏览器,以及可以向不支持CORS的网站请求数据。
不管是Node中间件代理还是nginx反向代理,主要是通过同源策略对服务器不加限制。
日常工作中,用得比较多的跨域方案是cors和nginx反向代理
————————————————

vue项目打包后 使用nginx部署
https://blog.csdn.net/superKM/article/details/100148095

vue开发环境配置跨域,一步到位

我的写法总结:
①api.js:
如果后端做了跨域处理,则这里可以直接写成测试环境地址:

 axios.defaults.baseURL = 'http://tshn.2windao.com:8897/filemanage';

如果跨域,可以在这里配置基础url,然后在vue.config.js里使用proxy反向代理

axios.defaults.baseURL =process.env.NODE_ENV === 'production' ? '/' : '/api/filemanage';

②vue.config.js

  devServer: {
    host: '0.0.0.0', //局域网和本地访问
    open: true,
    overlay: {
      warnings: false,
      errors: true,
    },
    proxy: {
      ['/api']: {
        target: 'http://record.2windao.com:8897',
        changeOrigin: true,
        pathRewrite: {
          ['^/api']: '',
        },
      },
    },
  },

本地测试地址是没有含有api的,所有,pathRewrite进行重写地址,把api替换成空字符“ ”。

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。