位置: IT常识 - 正文

Nginx跨域解决方案(nginx跨域配置详解)

编辑:rootadmin
Nginx跨域解决方案

推荐整理分享Nginx跨域解决方案(nginx跨域配置详解),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:nginx 解决跨域,nginx 解决跨域,nginx解决跨域的常用方案,nginx 跨域,nginx解决跨域问题原理,nginx跨域解决方案 8082,nginx 解决跨域,nginx 解决跨域,内容如对您有帮助,希望把文章链接给更多的朋友!

前置条件: 前端网站地址:http://localhost:4443 服务端网址:http://localhost:9081

当网站8080访问服务端接口的时候会产生跨域的问题

跨域主要设计到4个响应头:

Access-Control-Allow-Origin 用于设置允许跨域请求源地址 (预检请求和正式请求在跨域时候都会验证)Access-Control-Allow-Headers 跨域允许携带的特殊头信息字段 (只在预检请求验证)Access-Control-Allow-Methods 跨域允许的请求方法或者说HTTP动词 (只在预检请求验证)Access-Control-Allow-Credentials 是否允许跨域使用cookies,如果要跨域使用cookies,可以添加上此请求响应头,值设为true(设置或者不设置,都不会影响请求发送,只会影响在跨域时候是否要携带cookies,但是如果设置,预检请求和正式请求都需要设置)。不过不建议跨域使用,除非必要,因为有很多方案可以代替。

跨域请求时会先发送预检请求,浏览器首先会询问服务器,当前网页所在的域名是否在服务器的许可列表中,以及可以使用的请求头和请求方法。若得到肯定的答复,才会发送正式请求Xhr请求,否则报错

报错情况1

Access to XMLHttpRequest at ‘http://localhost:9081/api/’ from origin ‘http://localhost:4443’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No > ‘Access-Control-Allow-Origin’ header is present on the requested resource.

通过错误信息可以很清晰的定位到错误priflight说明是个预请求,CORS 机制跨域会首先进行 preflight(一个 OPTIONS 请求), 该请求成功后才会发送真正的请求。这一设计旨在确保服务器对 CORS 标准知情,以保护不支持 CORS 的旧服务器

解决方案:

server { listen 8080; server_name localhost; location / { add_header Access-Control-Allow-Origin 'http://localhost:4443'; proxy_pass http://localhost:9081; }}Nginx跨域解决方案(nginx跨域配置详解)

报错情况2

Access to XMLHttpRequest at ‘http://localhost:9081/api/’ from origin ‘http://localhost:4443’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: It does not have HTTP ok status.

通过报错信息提示可以得知,是跨域浏览器默认行为的预请求(option请求)没有收到ok状态码,此时再修改配置文件,当请求为option请求时候,给浏览器返回一个状态码(一般是204)

如果想要每次响应信息都携带头字段信息,需要在最后添加always(经我测试,只有Access-Control-Allow-Origin这个头信息需要加always,其他的不加always也会携带回来)

server { listen 8080; server_name localhost; location / { add_header Access-Control-Allow-Origin 'http://localhost:4443' always; if ($request_method = 'OPTIONS') { return 204; } proxy_pass http://localhost:9081; }}

报错情况3

Access to XMLHttpRequest at ‘http://localhost:9081/api/’ from origin ‘http://localhost:4443’ has been blocked by CORS policy: Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response. 意思就是预请求响应头Access-Control-Allow-Headers中缺少头信息(各种情况会不一样,在发生跨域后,在自定义添加的头信息是不允许的,需要添加到请求响应头Access-Control-Allow-Headers中,以便浏览器知道此头信息的携带是服务器承认合法的)

server { listen 8080; server_name localhost; location / { add_header Access-Control-Allow-Origin 'http://localhost:4443' always; if ($request_method = 'OPTIONS') { add_header Access-Control-Allow-Headers '*'; #为什么写在if里面而不是接着Access-Control-Allow-Origin往下写?因为这里只有预检请求才会检查 return 204; } proxy_pass http://localhost:9081; }}

报错情况4 如果`if ($request_method = ‘OPTIONS’)``中配置了add_header,那么预检请求外部配置均会失效 官方文档

There could be several add_header directives. These directives are inherited from the previous level if and only if there are no add_header directives defined on the current level.

意思就是当前层级无 add_header 指令时,则继承上一层级的add_header。相反的若当前层级有了add_header,就应该无法继承上一层的add_header。

server { listen 8080; server_name localhost; location / { add_header Access-Control-Allow-Origin 'http://localhost:4443' always; if ($request_method = 'OPTIONS') { add_header Access-Control-Allow-Origin 'http://localhost:4443'; add_header Access-Control-Allow-Headers '*'; #为什么写在if里面而不是接着Access-Control-Allow-Origin往下写?因为这里只有预检请求才会检查 return 204; } proxy_pass http://localhost:9081; }}

但是由于此写法携带上两个 Access-Control-Allow-Origin ,这种情况也是不允许的 因此修正过的配置如下(其中*可以根据自己的需求替换)

server { listen 8080; server_name localhost; location / { if ($request_method = 'OPTIONS') { add_header Access-Control-Allow-Origin 'http://localhost:4443'; add_header Access-Control-Allow-Headers '*'; #为什么写在if里面?因为这里只有预检请求才会检查 add_header Access-Control-Allow-Methods '*'; add_header Access-Control-Allow-Credentials 'true'; return 204; } if ($request_method != 'OPTIONS') { add_header Access-Control-Allow-Origin 'http://localhost:4443' always; add_header Access-Control-Allow-Credentials 'true'; } proxy_pass http://localhost:9081; }}

或者

server { listen 8080; server_name localhost; location / { add_header Access-Control-Allow-Origin 'http://localhost:4443' always; add_header Access-Control-Allow-Headers '*'; add_header Access-Control-Allow-Methods '*'; add_header Access-Control-Allow-Credentials 'true'; if ($request_method = 'OPTIONS') { return 204; } proxy_pass http://localhost:9081; }}

参考文章:Nginx 轻松解决跨域问题

本文链接地址:https://www.jiuchutong.com/zhishi/300723.html 转载请保留说明!

上一篇:缺陷修改实践——replace函数的运用|思考?(缺陷修饰)

下一篇:【pytorch】有关nn.EMBEDDING的简单介绍(pytorch nn.parameters)

  • 笔记本破解wifi密码教程(笔记本wifi密码破解)(笔记本破解wifi密码有什么办法解决)

    笔记本破解wifi密码教程(笔记本wifi密码破解)(笔记本破解wifi密码有什么办法解决)

  • 冒险岛圣地怎么去(冒险岛圣地怎么去圣地)

    冒险岛圣地怎么去(冒险岛圣地怎么去圣地)

  • 小米手环4nfc没有微信提醒(小米手环4nfc没电了可以刷公交卡嘛)

    小米手环4nfc没有微信提醒(小米手环4nfc没电了可以刷公交卡嘛)

  • 非朋友显示十条朋友圈为什么只能看到一条(非朋友显示十条朋友圈为什么看不到)

    非朋友显示十条朋友圈为什么只能看到一条(非朋友显示十条朋友圈为什么看不到)

  • 红米手机指纹设置消失了(红米手机指纹设置不了怎么办)

    红米手机指纹设置消失了(红米手机指纹设置不了怎么办)

  • ipad长按不能关机(ipad长按关机键关不了机)

    ipad长按不能关机(ipad长按关机键关不了机)

  • 荣耀笔记本是华为的吗(荣耀笔记本是华为的产品吗)

    荣耀笔记本是华为的吗(荣耀笔记本是华为的产品吗)

  • 腾讯会员在ipad登录不上去(腾讯会员在ipad怎么用手机号登录微信)

    腾讯会员在ipad登录不上去(腾讯会员在ipad怎么用手机号登录微信)

  • xsmax支持wifi6吗

    xsmax支持wifi6吗

  • 腾讯会议可以两台设备同时登录吗(腾讯会议可以两天用同一个会议号吗)

    腾讯会议可以两台设备同时登录吗(腾讯会议可以两天用同一个会议号吗)

  • 安全删除硬件并弹出媒体什么意思(安全删除硬件并弹出媒体怎么恢复)

    安全删除硬件并弹出媒体什么意思(安全删除硬件并弹出媒体怎么恢复)

  • 笔记本电脑的像素一般是多少(笔记本电脑的像素都差吗)

    笔记本电脑的像素一般是多少(笔记本电脑的像素都差吗)

  • 怎样在wps中画竖线(怎么在wps中间画竖线)

    怎样在wps中画竖线(怎么在wps中间画竖线)

  • 荣耀play3支持nfc吗(荣耀play3支持电信卡吗)

    荣耀play3支持nfc吗(荣耀play3支持电信卡吗)

  • 接到未知号码怎么回事(接到未知号码怎么设置)

    接到未知号码怎么回事(接到未知号码怎么设置)

  • vivo设置返回键位置(vivo设置返回键怎么在屏幕旁边)

    vivo设置返回键位置(vivo设置返回键怎么在屏幕旁边)

  • 华为手机有没有双击亮屏(华为手机有没有万能遥控)

    华为手机有没有双击亮屏(华为手机有没有万能遥控)

  • 华为nova3i手机尺寸(华为nova3尺寸大小)

    华为nova3i手机尺寸(华为nova3尺寸大小)

  • 手机上怎么设置无线路由器(手机上怎么设置门禁卡)

    手机上怎么设置无线路由器(手机上怎么设置门禁卡)

  • 斐讯设备sn号是什么(斐讯序列号查询)

    斐讯设备sn号是什么(斐讯序列号查询)

  • 微博怎么看好友在线(微博怎么看好友的点赞)

    微博怎么看好友在线(微博怎么看好友的点赞)

  • 如何查找手机nfc功能(如何查找手机定位)

    如何查找手机nfc功能(如何查找手机定位)

  • 华为mate50怎么读详情(华为mate50pro怎么读)

    华为mate50怎么读详情(华为mate50pro怎么读)

  • 磁盘使用量指示条不见了(磁盘使用量30m)

    磁盘使用量指示条不见了(磁盘使用量30m)

  • 怎么修改金税盘登录密码
  • 应税劳务的主要成本包括
  • 无需外汇局审批的账户
  • 非盈利组织减免的增值税怎么做账
  • 开具红字发票的当月就要进项税额转出吗
  • 业务招待费扣除基数的收入包括哪些
  • 货物运输代理费用会计分录
  • 挂靠别人公司怎么交税?
  • 进项票错了但是销项票开出去了怎么办
  • 企业所得税前可以扣除的项目
  • 买卖金融商品应交增值税计算
  • 小规模增值税做那个费用科目
  • 公司无收入费用如何做账务处理核算?
  • 汽车修理店业务范围
  • 运输费可以和货款合并开票吗
  • 物业公司转售电费怎么开票
  • 网吧卖出那些零食怎么卖
  • 增值税专用发票验票
  • 建筑企业财务制度及规范流程
  • 未代扣代缴个税的滞纳金与处罚规定
  • 收支利息税务如何处理
  • 企业注销个税怎样更正申报呢
  • linux命令执行成功后会返回什么
  • 设计费要计入固定费用吗
  • 公司之间往来借款利息怎么记账
  • 如何解决win10系统复制文件速度
  • 关于激活函数的说法错误的是
  • 退货的增值税专票怎么开
  • 计提税金及附加怎么算
  • 其他应收款
  • 转让存货属于什么收入
  • 季度所得税表中营业收入填万元还是总金额
  • 增值税加计抵减怎么算
  • 出售生产设备的会计分录
  • js如何转换为数值型
  • PyTorch 深度学习实战 | 基于生成式对抗网络生成动漫人物
  • 倾向得分匹配后怎么进行回归
  • 劳动法中迟到半小时扣多少钱
  • java方法的返回值类型有哪些
  • 公司项目支付的钱叫什么
  • mongodb27017
  • 财务报表申报后怎么修改
  • 收到境外企业顾问费
  • mysql使用工具
  • 环评费用如何进项抵扣
  • 公司被仲裁后怎么补救
  • 水电费没有发票吗
  • 长期股权投资的账务处理
  • 动漫产业增值税率是多少
  • 上年多计提的费用,今年如何记账
  • 收到保险公司的发票怎么做账
  • 酒店营业成本率怎么算
  • 所有者权益的概念和特征
  • 当月发票未作废
  • 专票三流合一指哪三流
  • 支票为什么不能取钱
  • 删除数据库重复
  • SQL语句实现表的创建
  • iphone os
  • win功能下载所需文件
  • linux px
  • 虚拟机ubuntu怎么用
  • 进程 com surrogate
  • win10电脑去掉快捷箭头百度经验
  • win10系统无法卸载补丁
  • 订书针的原理
  • win10搭建ftp服务器的步骤
  • linux中病毒了怎么处理
  • ES6 javascript中class类的get与set用法实例分析
  • perl 获取参数
  • 网页设计中span
  • js判断pc还是移动
  • node.js基础入门
  • Linux bash Shell中的变量类型详解
  • js数组菜鸟教程
  • javascript语言基础
  • javascript面向过程
  • googlevoice使用教程
  • 深圳国税局官网登录
  • 长春国税局科员工资是多少
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设