【跨域】如何解决跨域问题

超、凢脫俗 2024-03-16 13:32 271阅读 0赞

同源策略

同源

相同协议+相同域名+相同端口

内容

  • 浏览器的同源策略 - Web 安全 | MDN (mozilla.org)

浏览器页面向不同源的服务器发送ajax请求资源时，响应的数据会被浏览器拦截

意义

出于安全性的考虑，防止恶意获取数据

解决方案

JSONP

不使用ajax请求，替换为不受同源策略控制的script标签

缺点

  • 只支持get

不常用

Node正向代理

利用服务端请求不会跨域的特性，让接口和当前站点同域。

浏览器页面的请求都发给同源的node代理服务器，根据请求内容的不同转发给不同的服务器，再转发给浏览器

image.png

eg Vue-cli 3.x

  1. // vue.config.js 如果没有就新建
  2. module.exports = {
  4.   devServer: {
  6.     port: 8000,
  7.     proxy: {
  9.       "/api": {
  11.         target: "http://localhost:8080"
  12.       }
  13.     }
  14.   }
  15. };

Nginx反向代理

浏览器页面的请求都发给同源的nginx代理服务器，根据请求内容的不同转发给不同的服务器，再转发给浏览器
image.png

  1. server {
  3.         listen 80;
  4.         server_name local.test;
  5.         location /api {
  7.             proxy_pass http://localhost:8080;
  8.         }
  9.         location / {
  11.             proxy_pass http://localhost:8000;
  12.         }
  13. }

缺点

  • 不够灵活，前后端人员需要协商请求路径

CORS

后端添加浏览器页面ip的白名单，浏览器获取http响应头后，判断页面ip是否在白名单中，决定是否拦截响应数据
跨源资源共享（CORS） - HTTP | MDN (mozilla.org)

springboot中的标签@CrossOrigin可以配置

websocket

没有了http头，就不受同源策略的限制

参考文章

  • 解决跨域问题的几种方案 - 知乎 (zhihu.com)
  • 10 种跨域解决方案（附终极方案） - 知乎 (zhihu.com)

发表评论

表情：
评论列表 （有 0 条评论，271人围观）

还没有评论，来说两句吧...

相关阅读

    相关 如何解决跨域？

    如何解决跨域？ JSONP 是服务器与客户端跨源通信的常用方法。最大特点就是简单适用，兼容性好（兼容低版本IE），缺点是只支持get请求，不支持post请求。 核心思...

    朱雀朱雀/ 0 赞/ 738 阅读

    相关 如何解决跨域

    跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对 JavaScript 施加的安全限制。

    灰太狼灰太狼/ 0 赞/ 999 阅读