跨域问题(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;
}
相关推荐
让学习成为一种生活方式3 分钟前
R包下载太慢安装中止的解决策略-R语言003
java·数据库·r语言
晨曦_子画9 分钟前
编程语言之战:AI 之后的 Kotlin 与 Java
android·java·开发语言·人工智能·kotlin
南宫生31 分钟前
贪心算法习题其三【力扣】【算法学习day.20】
java·数据结构·学习·算法·leetcode·贪心算法
Heavydrink1 小时前
HTTP动词与状态码
java
ktkiko111 小时前
Java中的远程方法调用——RPC详解
java·开发语言·rpc
计算机-秋大田1 小时前
基于Spring Boot的船舶监造系统的设计与实现,LW+源码+讲解
java·论文阅读·spring boot·后端·vue
神里大人1 小时前
idea、pycharm等软件的文件名红色怎么变绿色
java·pycharm·intellij-idea
小冉在学习1 小时前
day53 图论章节刷题Part05(并查集理论基础、寻找存在的路径)
java·算法·图论
代码之光_19802 小时前
保障性住房管理:SpringBoot技术优势分析
java·spring boot·后端
ajsbxi2 小时前
苍穹外卖学习记录
java·笔记·后端·学习·nginx·spring·servlet