跨域问题(CORS)

文章目录

介绍

跨域资源共享(CORS, Cross-Origin Resource Sharing)是浏览器的一个安全机制,用来防止来自一个域的网页对另一个域下的资源进行请求。仅允许向 同域名同端口 的服务器发送请求。

对于前后端分离的项目,往往会有跨域问题。

解决

一、添加跨域头,允许跨域

1.后端配置CORS策略(4种方法)

浏览器检测到跨域请求时,会先发送一个预检请求(OPTIONS)给后端服务器,若后端配置了CORS策略,即返回允许的 CORS 头(如 Access-Control-Allow-Origin)来告诉浏览器它允许跨域请求。如果服务器未返回这些头,浏览器将阻止实际请求。如果预检请求成功,浏览器将继续发送实际的请求。如果服务器的响应中没有正确的 CORS 头,浏览器同样会阻止实际请求的返回数据。


2.配置nginx

java 复制代码
#跨域配置
location /api {
    add_header 'Access-Control-Allow-Origin' $http_origin;
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
    add_header Access-Control-Allow-Headers '*';
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Origin' $http_origin;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain; charset=utf-8';
        add_header 'Content-Length' 0;
        return 204;
    }
}

二、代理

代理的原理是,由于CORS检测只会在客户端进行,只需要前端的请求也是同域名同端口即可,前端发送请求到代理服务器,这个代理服务器和前端服务器的域名和端口一致,不会触发CORS,然后代理服务器再将请求转发给后端服务器即可。

开发环境: 前端使用代理,简化开发过程中的跨域问题。

代理的实质是转发请求,前端请求到代理时浏览器会认为是同源,不会触发跨域限制,之后代理服务器再将请求转发给后端服务器。

比如proxy.ts文件里的

生产环境:

可使用Nginx或其他反向代理服务器

java 复制代码
location /api {
    proxy_pass http://127.0.0.1:8080;
}
相关推荐
y25089 分钟前
《Object类》
java·开发语言
曙曙学编程10 分钟前
初级数据结构——树
android·java·数据结构
BestandW1shEs16 分钟前
彻底理解消息队列的作用及如何选择
java·kafka·rabbitmq·rocketmq
爱吃烤鸡翅的酸菜鱼18 分钟前
Java算法OJ(8)随机选择算法
java·数据结构·算法·排序算法
码蜂窝编程官方22 分钟前
【含开题报告+文档+PPT+源码】基于SpringBoot+Vue的虎鲸旅游攻略网的设计与实现
java·vue.js·spring boot·后端·spring·旅游
Viktor_Ye38 分钟前
高效集成易快报与金蝶应付单的方案
java·前端·数据库
hummhumm40 分钟前
第 25 章 - Golang 项目结构
java·开发语言·前端·后端·python·elasticsearch·golang
一二小选手44 分钟前
【Maven】IDEA创建Maven项目 Maven配置
java·maven
J老熊1 小时前
JavaFX:简介、使用场景、常见问题及对比其他框架分析
java·开发语言·后端·面试·系统架构·软件工程
猿java1 小时前
什么是 Hystrix?它的工作原理是什么?
java·微服务·面试