解决CORS : No ‘Access-Control-Allow-Origin’ header is present on the requested问题 ,Nginx跨域配置。

        在地址的协议,ip,端口都一样情况下,才允许访问相同的cookie、localStorage或是发送Ajax请求等等。在不同源的情况下访问就称为跨域

一、场景说明
        如果项目没做前后端分离,是不会有跨域问题的。前后端分离的项目中,前端调用后台服务时,报错 No 'Access-Control-Allow-Origin' header is present on the requested resource,你就是遇到了跨域问题。解决Nginx跨域问题,可以通过在Nginx配置文件中添加相应的跨域设置。

二、解决方式

        在http { server { ...} } 中添加以下配置

#允许跨域请求的域,*代表所有
add_header 'Access-Control-Allow-Origin' *;
#允许带上cookie请求
add_header 'Access-Control-Allow-Credentials' 'true';
#允许请求的方法,比如 GET/POST/PUT/DELETE
add_header 'Access-Control-Allow-Methods' *;
#允许请求的header
add_header 'Access-Control-Allow-Headers' *;

server {
    listen   80;
    server_name   www.clw.com;


    location / {

#########################跨域配置start###########################
        # 设置允许跨域的域,* 表示允许任何域,也可以设置特定的域
        add_header 'Access-Control-Allow-Origin' '*';
        # 允许请求的方法,比如 GET/POST/PUT/DELETE

        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        # 允许的头信息字段
        add_header 'Access-Control-Allow-Headers' 'User-Agent,Keep-Alive,Content-Type';
        # 缓存时间
        add_header 'Access-Control-Max-Age' 1728000;

        # 预检请求的处理
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'User-Agent,Keep-Alive,Content-Type';
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Type' 'text/plain charset=UTF-8';
            add_header 'Content-Length' 0;

            return 204;
        }

######################跨域配置end###################################
    }
}

  • 42
    点赞
  • 35
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
回答: 当出现"CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."的错误信息时,表示在请求的资源中没有包含'Access-Control-Allow-Origin'头部字段。这是由CORS跨域资源共享)政策引起的。CORS是一种机制,用于控制在跨域请求中哪些资源可以被访问。它通过在响应头中添加'Access-Control-Allow-Origin'字段来指示允许访问的来源。如果请求的资源没有设置该头部字段,浏览器会阻止访问该资源并返回这个错误信息。 要解决这个问题,你可以在服务器端配置响应头中添加'Access-Control-Allow-Origin'字段,并设置允许访问的来源。例如,将该字段设置为'*'表示允许所有来源访问该资源。如果你控制不了服务器端,你可以尝试使用代理服务器来转发请求,或者使用JSONP等其他跨域请求的方法。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [浏览器同源策略导致跨域问题 No ‘Access-Control-Allow-Originheader 原因及解决方式--(后端、nginx、...](https://blog.csdn.net/yu619251940/article/details/127571747)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [解决xxx by CORS policy: No ‘Access-Control-Allow-Originheader is present on the requested ...](https://blog.csdn.net/lvoelife/article/details/126244103)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值