在开发过程中遇到的跨域问题，产生跨域问题的原因

文章	分类	评论
323	4	39

文章

分类

323

在开发过程中，我们几乎都会遇到跨域请求的问题，这主要是因为浏览器的同源策略,同源策略要求执行脚本的网页的源必须与请求的资源的源相同，否则浏览器会阻止这种请求。具体来说，同源策略要求协议，端口如果有指定和域名完全匹配。

举个例子：如果我们在开发过程中，前端项目是部署在http://localhost:3000,然而后端API部署在http://api.example.com,由于域名不同，直接从前端向后端发起请求，就会因为不符合同源策略而被浏览器拦截。

在开发过程中我们的解决方案主要有如下几种：

CORS设置

让后端开发在测试服务器上配置CORS跨域资源共享策略。这通常在后端响应头中添加Access-Control-Allow-Origin。例如：跨域设置为*跨域允许所有域的访问，或者指定特定的域名来限制访问只允许来自这些域的请求。

通过前端开发工具如Vite或者Webpack配置代理。这些工具的底层实现通常用了http-proxy库，可以在本地开发环境中代理API请求到指定的后端服务，从而绕过浏览器的同源策略，当然，还有生成环境也可以用Nginx代理配置跨域

感谢大家观看