nginx如何配置跨域

createh52周前 (06-09)技术教程6

要在 Nginx 中配置跨域,可以使用 add_header 指令来添加 Access-Control-Allow-* 头信息,如下所示:

location /api {
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type, X-Requested-With';
        add_header 'Access-Control-Max-Age' 86400;
        add_header 'Content-Length' 0;
        return 204;
    }

    add_header 'Access-Control-Allow-Origin' '*' always;
    add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE';
    add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type, X-Requested-With';
    proxy_pass http://backend;
}

以上配置中,我们在 /api 路径下配置了跨域。其中,如果请求方法为 OPTIONS,则添加相应的头信息后直接返回 204,否则添加常规的跨域头信息并转发请求到后端服务。

具体来说,我们添加了以下几个头信息:

  • Access-Control-Allow-Origin:允许的跨域来源,这里设置为 * 表示允许任何来源。
  • Access-Control-Allow-Methods:允许的请求方法,这里设置为 GET, POST, PUT, DELETE, OPTIONS。
  • Access-Control-Allow-Headers:允许的请求头,这里设置了 Authorization, Content-Type, X-Requested-With。
  • Access-Control-Max-Age:预检请求的有效期,这里设置为 86400 秒。

注意,由于浏览器会先发送一个预检请求(OPTIONS 请求),所以我们需要针对这种情况单独处理,否则浏览器会报错。

您的点赞、关注是我更新的最大动力,感谢

相关文章

nginx location配置

nginx location配置location 指令语法location [modifier] [URI] {# 配置块}modifier:匹配修饰符,决定了匹配的类型和优先级。URI:要匹配的请求...

网页服务-Nginx - 修改默认网站存储路径

基本环境底层: Windows 11 x64 虚拟化层:VMWare Workstation 17.0.2 虚拟化兼容性:ESXi 6.7 虚拟硬件: CPU: 4 Core RAM:...

Nginx的路径匹配规则

=,精确匹配^~,匹配以xx开头~,正则匹配,区分大小写~*,正则匹配,不区分大小写!~,正则不匹配,区分大小写!~*,正则不匹配,不区分大小写/ 通配,所有没有匹配的,按当前规则处理 优先级: =...

在nginx配置文件中设置nginx缓存

可以按照以下步骤进行操作:1.打开nginx配置文件,一般在/etc/nginx/nginx.conf中2.在http段中添加以下内容:http { # 设置nginx缓存路径和缓存大小...

常规服务器环境怎么搭建及项目部署

一、引言在服务器环境搭建和项目部署过程中,需要进行一系列的配置和操作,以确保服务器的正常运行和项目的顺利部署。本文将详细介绍常规服务器环境搭建及项目部署的步骤。如果你没有服务器,没有技术,想要配置这个...