HTML CORS(跨域资源共享)是一种安全策略，它允许Web应用程序从不同的域请求数据，CORS的主要目的是防止恶意网站通过跨域请求窃取用户数据，本文将详细介绍HTML CORS的工作原理、如何实现以及相关问题与解答。
CORS工作原理
CORS的工作原理是在浏览器和服务器之间建立一个通信机制，使得服务器可以在响应头中添加一些特定的信息，告诉浏览器这个响应是否允许跨域访问，这些信息包括：
1、Access-Control-Allow-Origin:指定允许跨域访问的源(域名、协议+域名或IP地址);
2、Access-Control-Allow-Methods:指定允许的HTTP请求方法；
3、Access-Control-Allow-Headers:指定允许的HTTP请求头；
4、Access-Control-Allow-Credentials:指定是否允许携带身份凭证(如Cookie)。
当浏览器收到带有这些响应头的响应时，会根据这些信息判断是否允许跨域访问，如果服务器没有设置这些响应头，或者设置不正确，浏览器将拒绝跨域请求。
如何实现CORS
在服务器端实现CORS,需要对每个需要支持跨域访问的接口进行配置，以下是一些常见编程语言和框架的实现方法：
1、Node.js(使用Express框架):
const express = require('express');
const app = express();
app.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
next();
});
app.get('/api/data', (req, res) => {
// ...处理请求并返回数据
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
2、Python(使用Flask框架):
from flask import Flask, jsonify, request, make_response from flask_cors import CORS app = Flask(__name__) CORS(app) @app.route('/api/data', methods=['GET']) def get_data(): ...处理请求并返回数据 return jsonify({"data": "example"}) if __name__ == '__main__': app.run(port=3000)
3、Java(使用Spring Boot框架):
需要在项目中引入spring-boot-starter-web依赖：
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
在主类上添加@EnableWebMvc注解以启用MVC功能：
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
@SpringBootApplication
@Configuration
public class Application extends WebMvcConfigurerAdapter {
public static void main(String[] args) {
SpringApplication.run(Application.class, args);
}
}
接下来，重写addCorsMappings方法以配置CORS:
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**") // 对所有路径生效
.allowedOrigins("*") // 允许所有来源访问("*"表示任意来源)
.allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") // 允许的请求方法(GET、POST、PUT、DELETE、OPTIONS)
.allowCredentials(true) // 允许携带身份凭证(如Cookie)
.maxAge(3600); // 预检请求的有效期为3600秒(1小时)后过期；也可以使用HttpHeaders中的Cache-Control来控制缓存时间；对于OPTIONS类型的预检请求可以设置为0表示立即过期，该值仅适用于预检请求，其他类型的预检请求应设置为非零值，maxAge(600).allowedHeaders("*") // 允许的请求头列表(*表示任意头部字段)等；最后不要忘了调用super.addCorsMappings(registry);以保留原有的配置。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/165891.html
微信扫一扫 