Nginx跨域设置Access-Control-Allow-Origin无效的解决办法

2024-12-02 17:04:01

nginx 版本 1.11.3

使用大家说的以下配置，验证无效，跨域问题仍然存在

add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET,POST';

使用以下配置，生效。

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' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,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;
       }
       if ($request_method = 'POST') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
       }
       if ($request_method = 'GET') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
       }

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对我们的支持。如果你想了解更多相关内容请查看下面相关链接

如何用Nginx解决前端跨域问题

前言在开发静态页面时,类似Vue的应用,我们常会调用一些接口,这些接口极可能是跨域,然后浏览器就会报cross-origin问题不给调. 最简单的解决方法,就是把浏览器设为忽略安全问题,设置--disable-web-security.不过这种方式开发PC页面到还好,如果是移动端页面就不行了. 解决办法使用Nginx转发请求.把跨域的接口写成调本域的接口,然后将这些接口转发到真正的请求地址. 举个栗子例如我们在开发一个Vue应用. 原先: 调试页面是: http://192.168.1.1
Nginx配置跨域请求Access-Control-Allow-Origin * 详解

前言当出现403跨域错误的时候 No 'Access-Control-Allow-Origin' header is present on the requested resource,需要给Nginx服务器配置响应的header参数: 一. 解决方案只需要在Nginx的配置文件中配置以下参数: location / { add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods 'GET
解决nginx/apache静态资源跨域访问问题详解

1. apache静态资源跨域访问找到apache配置文件httpd.conf 找到这行 #LoadModule headers_module modules/mod_headers.so 把#注释符去掉 LoadModule headers_module modules/mod_headers.so 目的是开启apache头信息自定义模块在独立主机配置文件中新增header Header set Access-Control-Allow-Origin * 例如: <VirtualHost
利用Nginx处理Vue开发环境的跨域的方法

1. 需求本地测试域名与线上域名相同,以便正确传递 Cookie 和进行 SSO 测试. 注:由于 SSO 登录后,相关 Cookie 被加在四级域名上,因而需要做到本地测试域名和线上接口域名相同. 2. 方案配置 Host 文件使线上域名指向 Localhost: 127.0.0.1 product.xxx.xxx.com 配置 Nginx 进行对应转发: server { listen 80; listen [::]:80; server_name ${product.xxx.xxx.c
nginx解决跨域问题的实例方法

前后端分离,使用nginx解决跨域问题前端:vue.js+nodejs+webpack 后台:SpringBoot 反向代理服务器:nginx 思想:将前端代码打包,让nginx指向静态资源,nginx对后台请求进行转发. 1.将前端代码打包: npm run build 会生成一个dist文件夹.包含一个index.html文件和一个static文件夹,路径以我本地为例: /Users/xxx/ideaProjects/webtest/dist 2.打开 /usr/local/etc/ngi
利用Nginx反向代理解决跨域问题详解

问题在之前的分享的跨域资源共享的文章中,有提到要注意跨域时,如果要发送Cookie,Access-Control-Allow-Origin就不能设为*,必须指定明确的.与请求网页一致的域名.在此次项目开发中与他人协作中就遇到此类问题. 解决思路一般来说,与后台利用CORS跨域资源共享将Access-Control-Allow-Origin设置为访问的域名即可,这个需要后台的配合,且有些浏览器是不支持的. 基于与合作方后台的配合,利用nginx方向代理来满足浏览器的同源策略来实现跨域实现方法
Vue中跨域及打包部署到nginx跨域设置方法

众所周知,我们在做前后端分离项目的时候,经常需要在本地起前端工程,接口希望拉取服务端的实际数据而不是本地的mock数据,而如果本地程序直接访问远程接口, 肯定会遇到跨域问题. 什么是跨域?实现跨域的多种方式? 这里我就不详细介绍了,大家自行百度哈为什么要实现前端跨域一般来讲,前后端分离的项目在大公司都会由后台设置允许跨域访问,因为后台设置允许跨域是很简单和方便的,但是某些情况下,一些小公司或者你工作的场所后台不怎么配合的情况下,这就需要前端来配置跨域请求来方便我们使用接口 vue项目中的配置
Ajax跨域请求COOKIE无法带上的完美解决办法

1.原生ajax请求方式: 1 var xhr = new XMLHttpRequest(); 2 xhr.open("POST", "http://xxxx.com/demo/b/index.php", true); 3 xhr.withCredentials = true; //支持跨域发送cookies 4 xhr.send(); 2.jquery的ajax的post方法请求: $.ajax({ type: "POST", url: &qu
vuecli3打包后出现跨域问题,前端配置拦截器无效的解决

目录打包后跨域问题,前端配置拦截器无效问题解决方案 vue3处理跨域问题打包后跨域问题,前端配置拦截器无效问题这几天在把项目弄好,打包完成后发现之前cli配置的拦截器没有在打包后没起到作用,使用别的方法通过nginx反向代理进行配置跨域. 解决方案在nginx里面的nginx.config里面配置配置如下 server { listen 80;#监听端口 server_name localhost;#代理服务地址 add_header Access-Control-Allow-O
Nginx跨域设置Access-Control-Allow-Origin无效的解决办法

nginx 版本 1.11.3 使用大家说的以下配置,验证无效,跨域问题仍然存在 add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Methods' 'GET,POST'; 使用以下配置,生效. if ($request_method = 'OPTIONS') { add_heade
Jquery跨域获得Json时invalid label错误的解决办法

最后,仔细安静下来,细读 json 官方文档后发现这么一段: JSON数据是一种能很方便通过JavaScript解析的结构化数据.如果获取的数据文件存放在远程服务器上(域名不同,也就是跨域获取数据),则需要使用jsonp类型.使用这种类型的话,会创建一个查询字符串参数 callback=? ,这个参数会加在请求的URL后面.服务器端应当在JSON数据前加上回调函数名,以便完成一个有效的JSONP请求.如果要指定回调函数的参数名来取代默认的callback,可以通过设置$.ajax()的jsonp
Spring boot跨域设置实例详解

定义:跨域是指从一个域名的网页去请求另一个域名的资源 1.原由公司内部有多个不同的子域,比如一个是location.company.com ,而应用是放在app.company.com , 这时想从 app.company.com去访问 location.company.com 的资源就属于跨域本人是springboot菜鸟,但是做测试框架后端需要使用Springboot和前端对接,出现跨域问题,需要设置后端Response的Header.走了不少坑,在这总结一下以备以后使用 2.使用场景
Nginx跨域问题解析与解决

目录什么是跨域跨域场景解决跨域的四种方式什么是跨域域: 是指浏览器不能执行其他网站的脚本跨域: 它是由浏览器的同源策略造成的,是浏览器对 JavaScript 实施的安全限制,所谓同源(即指在同一个域)就是两个页面具有相同的协议 protocol,主机 host 和端口号 port 则就会造成跨域跨域场景场景的跨域场景有哪些,请参考下表当前url 请求url 是否跨域原因 http://www.autofelix.cn http://www.autofelix.cn/a
ASP.NET WebAPI2复杂请求跨域设置的方法介绍

ASP.Net Core的跨域设置比较简单官方都整合了具体的参见微软官方文档: https://docs.microsoft.com/zh-cn/aspnet/core/security/cors?view=aspnetcore-3.1#ecors 跨域条件跨域是指的当前资源访问其他资源时发起的http请求由于安全原因(由于同源策略,域名.协议.端口中只要有一个不同就不同源),浏览器限制了这些请求的正常访问,特别需要注意的是这些发生在浏览器中. 解决方法方法1.web.config文件
VUE跨域问题Access to XMLHttpRequest at

目录问题描述解决方案解决问题描述 VUE发送请求的时候不能请求到正确数据,控制台如下 Access to XMLHttpRequest at 'http://localhost:8000/equip_fault_report/all' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the r
跨域设置Cookie失效问题解决方案原理分析

目录问题出现场景代码实现如下登陆接口相关代码问题出现的解决方案如下反思和结语问题出现场景在做登录功能时,想把用户的信息通过Set-cookie在客户端设置cookie信息. 1.服务端通过cors中间件实现接口跨域访问.koa-session-minimal实现cookie的设置. 代码实现如下 const session = require('koa-session-minimal') const cors = require('@koa/cors'); // app.js co

Nginx跨域设置Access-Control-Allow-Origin无效的解决办法

相关推荐

随机推荐