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

前后端分离开发，必须解决跨域问题！

跨域：对于 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 注解即可，其主要作用是设置响应头，允许跨域访问。

3. 在后端解决：通过 Nginx 配置（较优）