本篇博客会介绍前后端分离项目如何实现跨域请求。
CORS(Cross-Origin Resource Sharing)问题的出现主要是因为浏览器的同源策略，同源的要求是：同协议，同IP，同端口。即不能在非同源情况下进行请求，实际上是为了保护用户的安全。
首先，准备一下frontend和backend的代码。这里为了创造非同源条件，前端跑在本机的8080端口下，后端跑在本机的8000端口下。
- 前端利用yarn创建的项目，webpack-dev-server作为服务器。前端项目结构和主要代码如下:
- 后端新建了一个springboot项目，只改动了入口文件和配置了端口。
的原理其实是标签不受同源策略的限制，即属性的值可以和当前站点非同源。使用可以通过来实现，也推荐大家使用或，通过即可安装，详细用法可以访问 官网。只需要改动即可。
请求成功，我们能看到我们需要的字符串。
- 首先我们使用进行网络请求，该组件没有跨域功能。
- 我们只需要在方法上添加注解，并设定允许进行跨域请求的地址，即可。
我们对请求进行规定，以开头的请求都交给后端服务器，以开头的请求交给前端服务器，实现代理即可。下面是nginx配置文件，注意先后顺序。
重启nginx服务后，我们需要对前端代码进行改写，后段代码去掉注解即可。
我们直接通过Nginx服务器访问即可。
这种方法较为简单，按照浏览器提示添加相应的请求头即可，这里不做演示。
本次试验中有大量的多余代码，请读者自行忽略。另外，复现的时候有几点需要注意:
- 前端项目每次都需要执行先编译，再启动项目。
- 停止项目时需要先按，再按才能停止项目，不然下次启动时会提示端口占用。
- 需要即时清除浏览器缓存。
版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/jjc/55626.html