【java入门到放弃】跨域

咸鱼2.02026-03-30 0:00

概述

同源策略是指，若页面的源和页面运行过程中加载的源不一致时，出于安全考虑，浏览器会对跨域的资源访问进行一些限制

源：协议 + 域名 + 端口

跨域的资源访问有Ajax / Fetch、DOM 操作、Cookie / LocalStorage等

同源策略对"读取数据"的行为最严格，而 Ajax / Fetch 正好是"读取数据"，所以限制最严格

Ajax 跨域时：请求能发出去，后端能收到并处理，也能返回结果，但浏览器不让前端代码拿到响应

解决

CORS

本质：服务器在响应头里告诉浏览器：这个请求可以跨域访问。

关键响应头举例：Access-Control-Allow-Origin: http://localhost:3000

java 复制代码

//springboot后端配置
@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        //能用 * 的时候别带 cookie，要带 cookie 就必须写具体域名。"
        registry.addMapping("/**") //对哪些接口启用跨域规则
                .allowedOrigins("*")  // 允许所有
                .allowedMethods("*")  // GET POST 等
                .allowedHeaders("*");  //允许客户端带哪些请求头
    }
}

代理

对于前端开发而言，大部分的跨域问题，都是通过代理解决的

代理适用的场景是：生产环境不发生跨域，但开发环境发生跨域

js 复制代码

// vue 的开发服务器代理配置
// vue.config.js
module.exports = {
	devServer: { // 配置开发服务器
		proxy: { // 配置代理
			"/api": { // 若请求路径以 /api 开头
				target: "http://dev.taobao.com", // 将其转发到 http://dev.taobao.com
			},
		},
	},
};

JSONP

在CORS出现之前，人们想了一种奇妙的办法来实现跨域，这就是JSONP。

要实现JSONP，需要浏览器和服务器来一个天衣无缝的绝妙配合。

JSONP的做法是：当需要跨域请求时，不使用AJAX，转而生成一个script元素去请求服务器，由于浏览器并不阻止script元素的请求，这样请求可以到达服务器。服务器拿到请求后，响应一段JS代码，这段代码实际上是一个函数调用，调用的是客户端预先生成好的函数，并把浏览器需要的数据作为参数传递到函数中，从而间接的把数据传递给客户端

JSONP有着明显的缺点，即其只能支持GET请求

Nginx

略