前后端分离项目解决前端跨域访问问题

时间:2022-11-10 16:12:45

前后端分离开发,必须解决跨域问题!

跨域:对于 url 如 http://localhost:8080,请求协议、ip 地址、端口号,只要发送请求方和接收请求方的这三个数据中,只要有一个不同,就表示是跨域访问!

AJAX 跨域访问:用户访问 A 网站时所产生的对 B 网站的跨域访问请求均提交到 A 网站的指定页面

跨域问题,可以理解为浏览器的一种保护机制,不接收不被信任的请求。

如果前端和后端集中开发,比如单体项目中,他们的请求都是统一的,则不存在跨域问题!

跨域问题主要出现在前后端分离的项目中,前端和后端分离,请求方式不统一,此时必须解决跨域问题!

其他说明参考:

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

    最简单的说就是从当前域名的网站下不能请求非同源的地址。

    所谓同源是指,域名,协议,端口均相同,只要有一个不同,就是跨域。

    请特别注意:跨域问题是针对于浏览器的,因为需要解决的跨域问题,是浏览器施加的安全限制所造成的。

  2. 跨域是指跨域名的访问,有三种情况:

    • 域名不同的跨域
    • 域名相同、端口不同的跨域
    • 二级域名不同的跨域
  3. 举例说明:

    http://www.123.com/index.html 调用 http://www.123.com/server.php (非跨域)

    http://www.123.com/index.html 调用 http://www.456.com/server.php (主域名不同:123/456,跨域)

    http://abc.123.com/index.html 调用 http://def.123.com/server.php (子域名不同:abc/def,跨域)

    http://www.123.com:8080/index.html 调用 http://www.123.com:8081/server.php (端口不同:8080/8081,跨域)

    http://www.123.com/index.html 调用 https://www.123.com/server.php (协议不同:http/https,跨域)

    请注意:localhost和127.0.0.1虽然都指向本机,但也属于跨域。

  4. 跨域会阻止什么操作?

    浏览器是从两个方面去做这个同源策略的

    一是:针对接口的请求

    二是:针对Dom的查询

    这点就能够很好的防止别人把你经常访问的网页嵌入到 iframe 中来获取你的个人信息,比如 a 页面中嵌入了 iframe,src 为不同源的 b 页面,则在 a 中无法操作 b 中的 dom,也没有办法改变 b 中 dom 中的 css 样式。

    而如果 ab 是同源的话是可以获取并操作的。

————————————————
原文链接:https://blog.csdn.net/qq_39552268/article/details/116274094

情景:前后端分离项目中,前端浏览器通过 ajax 异步访问后端接口,后端响应数据时,前端出现跨源请求被拦截的问题,也就是跨域访问问题。

前后端分离项目解决前端跨域访问问题

分析:前端发送请求,后端正常接收,只是后端响应数据时,前端接收有问题,问题出在前端接收响应这步上,浏览器会拦截跨源请求。

两种解决方案:(身为后端开发,我们主要通过后端解决此跨域问题)

  1. 在前端解决:在前端通过 JSONP 的配置,设置前端允许跨域

  2. 在后端解决:在后端设置响应数据,允许跨域

    步骤:在控制器类上,直接添加 @CrossOrigin 注解即可,其主要作用是设置响应头,允许跨域访问。