【后端新手谈10】3分钟搞定跨域问题

刚入门前后端你是不是也遇到过这样的情况前端页面写好了后端接口也测通了可一结合起来浏览器控制台就报错页面上什么数据都拿不到大概率你遇到的就是「跨域问题」。其实不用一看到“跨域”两个字就头大觉得是很高深的技术难题其实不然——跨域本质就是浏览器的一个“安全小脾气”只要找对方法几分钟就能解决而且代码可以直接复制粘贴不用自己瞎琢磨。这篇文章全程用大白话不搞复杂术语从“什么是跨域”“为什么会跨域”到“前后端具体怎么解决”一步步带你搞定跨域看完就能上手操作。一、什么是跨域浏览器出于安全考虑不让一个网站的页面去请求另一个“不一样”的网站的接口这种“不让通信”的情况就是跨域。举个例子你写的前端页面地址是http://localhost:8080可以理解为“前端小家”你写的后端接口地址是http://localhost:8081可以理解为“后端小家”虽然两个地址长得很像就差一个端口号但在浏览器眼里它们就是“两个不同的家”所以会直接拦截前端对后端的请求控制台会报类似这样的错No Access-Control-Allow-Origin header is present on the requested resource.不用记这个报错是什么意思只要看到它就知道——跨域了二、为什么会有跨域跨域的根源是浏览器的一个“安全规则”叫「同源策略」。所谓“同源”就是两个地址必须满足3个条件缺一不可协议相同比如都是http或者都是https简单说就是地址开头的“前缀”要一样域名相同比如都是baidu.com或者都是localhost就是“前缀”后面的主体要一样端口相同比如都是8080或者都是80就是地址最后冒号后面的数字要一样。只要有任意一个条件不满足浏览器就会判定为“不同源”进而触发跨域限制拦截请求。避坑跨域是「浏览器的限制」不是后端接口的问题也就是说后端接口其实已经收到了前端的请求只是浏览器觉得“不安全”拒绝接收后端返回的数据相当于“信使把信送到了但门卫不让进”。三、前后端手把手解决跨域下面给出最常用、最省心的解决方案前端Vue2/Vue3/Vite和后端SpringBoot都有代码直接复制粘贴不用修改太多新手也能搞定。先明确统一场景方便大家对照操作前端地址http://localhost:8080不管你用Vue还是React这个地址很常见后端地址http://localhost:8081SpringBoot默认端口可能是8080建议改成8081避免冲突需求前端通过接口请求后端数据解决跨域报错。方案1后端解决SpringBoot—— 全局跨域推荐一劳永逸后端解决是最稳妥的方式只要配置一次所有前端请求都能正常访问不用改前端代码。步骤在SpringBoot项目中新建一个“配置类”复制下面的代码粘贴进去重启后端即可。import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.cors.CorsConfiguration; import org.springframework.web.cors.UrlBasedCorsConfigurationSource; import org.springframework.web.filter.CorsFilter; Configuration public class CorsConfig { // 全局跨域配置复制粘贴即可 Bean public CorsFilter corsFilter() { // 1. 创建跨域配置对象 CorsConfiguration config new CorsConfiguration(); // 允许所有前端域名访问开发环境用这个方便测试生产环境可修改为具体域名 config.addAllowedOriginPattern(*); // 允许所有请求头比如token、参数等不用改 config.addAllowedHeader(*); // 允许所有请求方法GET、POST、删除、修改等不用改 config.addAllowedMethod(*); // 允许携带Cookie比如登录态不用改 config.setAllowCredentials(true); // 2. 配置跨域规则生效的路径/** 表示所有接口都生效 UrlBasedCorsConfigurationSource source new UrlBasedCorsConfigurationSource(); source.registerCorsConfiguration(/**, config); // 3. 返回跨域过滤器 return new CorsFilter(source); } }提示新建类的时候注意包名要和项目其他类一致比如com.xxx.config复制代码后IDE会自动导入依赖不用手动下载。重启后端后再去前端请求接口跨域报错就没了方案2前端解决开发环境—— 代理配置适合前端单独调试如果后端还没配置跨域或者你想单独调试前端就可以用前端代理的方式让浏览器“误以为”前端和后端是同源的从而避开跨域限制。下面分3种常见前端框架给出具体配置复制即用大家根据自己用的框架选择。1. Vue2 / Vue3webpack打包比如Vue CLI创建的项目步骤在项目根目录下找到vue.config.js文件没有就新建一个复制下面的代码module.exports { devServer: { proxy: { // /api 是前端请求的前缀可以自己改比如/backend /api: { target: http://localhost:8081, // 后端接口的地址必须和后端地址一致 changeOrigin: true, // 开启代理让浏览器以为是同源请求不用改 pathRewrite: { // 路径重写比如前端请求 /api/user实际请求后端 /api/user不用改 ^/api: /api } } } } }2. ViteVue3 / React比如Vite创建的项目步骤在项目根目录下找到vite.config.js文件复制下面的代码import { defineConfig } from vite // Vue项目保留这行React项目删除这行 import vue from vitejs/plugin-vue export default defineConfig({ plugins: [vue()], // Vue项目保留React项目删除 server: { proxy: { /api: { target: http://localhost:8081, // 后端接口地址和后端一致 changeOrigin: true, // 开启代理不用改 rewrite: (path) path.replace(/^\/api/, /api) // 路径重写不用改 } } } })3. 前端请求写法配置完代理后前端请求接口时不用写完整的后端地址比如http://localhost:8081/api/user直接写/api/user即可示例如下用axios举例小白也能看懂// 引入axios如果没安装先执行 npm install axios import axios from axios // 请求后端接口不用写http://localhost:8081 axios.get(/api/user) .then(res { // 成功拿到后端数据渲染到页面 console.log(拿到数据了, res.data) }) .catch(err { // 失败打印错误此时不会再报跨域错了 console.log(请求失败, err) })避坑配置完代理后一定要重启前端项目否则配置不生效如果还是报错检查一下后端地址是否正确以及请求路径是否带了 /api 前缀。四、常见疑问避坑总结1. 两种方案选哪个- 开发环境随便选前端代理调试方便后端配置一劳永逸- 生产环境优先选后端配置CORS或者用Nginx反向代理后面会简单提不推荐前端代理。2. 配置完还是报错大概率是这3个问题① 后端配置后没重启② 前端代理配置后没重启③ 前端请求路径写错没带 /api 前缀。3. 生产环境怎么解决生产环境中前端和后端会部署到同一个域名下一般不会有跨域问题如果还是有要么后端配置CORS修改允许的域名不要用 *要么用Nginx反向代理统一域名和端口小白暂时不用深钻后续可以再学。4. 跨域只存在于前后端吗不是跨域只限制“浏览器发起的请求”比如前端请求后端如果是后端之间互相调用比如A后端调用B后端接口就没有跨域问题。五、总结跨域是浏览器的安全限制不是接口本身的问题后端配置SpringBoot全局CORS一劳永逸前端配置代理适合开发调试所有代码都可以直接复制粘贴重启项目就能生效不用自己瞎改。看到这里相信你已经搞懂了跨域问题也知道怎么解决了。