跨域问题

什么是跨域?#

MDN

跨域是指在Web开发中，浏览器的同源策略（Same-Origin Policy）限制下，从一个源（协议 + 域名 + 端口）访问另一个源的资源。同源策略是Web浏览器的一个安全机制，它通过限制脚本从一个域访问另一个域的文档或向另一个域发送请求来保护用户的信息安全。如果从一个域请求另一个域的资源，浏览器会阻止请求，并抛出跨域错误。

例如，如果你的网站在https://A.com上，你不能直接访问https://B.com或https:A.com:8080或http://A.com的资源，这是因为两者不是同一个源 (域名，端口号（web默认端口80，可省），协议任何一个不一样都会导致跨域问题。）如果需要跨域访问B.com的资源，需要采取一些特定的技术手段，如跨域资源共享（CORS）、JSONP等。

怎么解决？#

• 花裤衩：https://panjiachen.github.io/vue-element-admin-site/zh/guide/advanced/cors.html

• CORS：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS

• JSONP：https://www.runoob.com/json/json-jsonp.html

• https://zh.javascript.info/fetch-crossorigin

前端#

在 dev 开发模式下可以下使用 webpack 的 proxy 使用也是很方便，参照 文档 就会使用了，楼主一些个人项目使用的该方法。但这种方法在生产环境是不能使用的。在生产环境中需要使用 nginx 进行反向代理。不管是 proxy 和 nginx 的原理都是一样的，通过搭建一个中转服务器来转发请求规避跨域的问题。

• webpack：https://www.webpackjs.com/configuration/dev-server/#devserver-proxy

• vite：https://cn.vitejs.dev/config/server-options.html#server-proxy

后端#

• @CrossOrigin注解: https://docs.spring.io/spring-framework/docs/6.0.6-SNAPSHOT/javadoc-api/org/springframework/web/bind/annotation/CrossOrigin.html