nginx服务器通过配置来解决API的跨域问题

前言

最近在采用jquery ajax调用http请求时，发现了一系列问题：

如采用firebug调试API请求（这个API是自己服务器的应用），看到服务器明明返回200状态，response返回数据也是json格式，但ajax返回的error。

在排除json数据格式不正确的原因之后，发现了ajax error函数返回“networkerror failed to execute ‘send' on ‘xmlhttprequest' failed to load ‘http //“ XMLHttpRequest.status=0，就是没有初始化。

后来才知道是跨域问题（CORS），因为程序调用的是远程服务器的API，服务器不允许跨域调用。如果只是简单的方法，只需要在程序的response添加支持跨域的header添加属性”Access-Control-Allow-Origin: * “即可。

如java 服务器代码：

yourownvariable.setHeader("Access-Control-Allow-Origin:", "origin url of your site");

yourownvariable.setHeader("Access-Control-Allow-Methods", "GET, POST,PUT");

如果是配置nginx服务器（如果是其他服务器，可以参考：I want to add CORS support to my server），需要在nginx.conf配置文件添加一下内容：

#
# Wide-open CORS config for nginx
#
location / {
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
#
# Custom headers and headers various browsers *should* be OK with but aren't
#
add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
#
# Tell client that this pre-flight info is valid for 20 days
#
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,Content-Range,Range';
add_header 'Access-Control-Expose-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
}
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,Content-Range,Range';
add_header 'Access-Control-Expose-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
}
}

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • nginx源码分析configure脚本详解

    nginx源码分析--configure脚本 一.前言 在分析源码时,经常可以看到类似 #if (NGX_PCRE) .... #endif 这样的代码段,这样的设计可以在不改动源码的情况下,通过简单的定义宏的方式来实现功能的打开与关闭,但是在nginx/src目录下始终没有找到宏 NGX_PCRE 对应的 #define 语句. 在之前介绍event模块的时候,讲到init_cycle函数中对cycle进行了初始化,其中很重要一步操作就是讲包含所有module信息的数组拷贝到这个cycle对应

  • 详解nginx服务器http重定向到https的正确写法

    http重定向到https使用了nginx的重定向命令.那么应该如何写重定向?之前老版本的nginx可能使用了以下类似的格式. rewrite ^/(.*)$ http://domain.com/$1 permanent; 或者 rewrite ^ http://domain.com$request_uri? permanent; 现在nginx新版本已经换了种写法,上面这些已经不再推荐. 下面是nginx http页面重定向到https页面最新支持的写法: server { listen 80

  • Nginx+lua 实现调用.so文件

    最近在和智能硬件部门一起,做一个室内定位的服务,该服务根据手机端传过来的beacon设备列表,根据一定的算法计算出具体的商场,并将商场ID和beason设备列表作为参数,调用.so文件中的计算方法,得出位置数据(坐标:x.y.z),返回给手机端. 因为服务对QPS要求比较高,并且都是纯查询操作,于是决定使用Nginx+lua+Redis的架构(该架构在公司内部已成主流,比较成熟).下面我将对lua调用.so文件的方式,做一下介绍. lua调用.so文件,主要有两种方式: 1.Lua直接调用动态链

  • Nginx 实现灰度发布的三种方法总结

    Nginx 实现灰度发布的三种方法总结

    Nginx 实现灰度发布的三种方法总结 灰度发布的主要原理是访问路由的控制,重点是保证每次访问的是同一个节点. 方式一:通过调节负载均衡权重 负载均衡 建立在现有网络结构之上,它提供了一种廉价有效透明的方法扩展网络设备和服务器的带宽.增加吞吐量.加强网络数据处理能力.提高网络的灵活性和可用性. 负载均衡,英文名称为Load Balance,其意思就是分摊到多个操作单元上进行执行,例如Web服务器.FTP服务器.企业关键应用服务器和其它关键任务服务器等,从而共同完成工作任务. 简单配置如下: ht

  • 详解Linux中Nginx反向代理下的tomcat集群

    详解Linux中Nginx反向代理下的tomcat集群

    Nginx具有反向代理(注意和正向代理的区别)和负载均衡等特点. 这次Nginx安装在 192.168.1.108 这台linux 机器上.安装Nginx 先要装openssl库,gcc,PCRE,zlib库等. Tomcat 安装在192.168.1.168 和 192.168.1.178 这两台机器上.客户端通过访问192.168.1.108 反向代理访问到192.168.1.168 和 192.168.1.178 里Tomcat 部署的工程内容.  1.Linux 下安装Nginx (机器

  • CentOS 7中利用yum安装Nginx的方法教程

    前言 因为最近在筹备Docker系列课程,其中涉及到在CentOS 7中安装Nginx.遇到一些问题,所以想着将过程总结分享出来供大家参考学习,下面来看看详细的介绍: 当使用以下命令安装Nginx时,发现无法安装成功. yum install -y nginx 需要做一点处理. 安装Nginx源 执行以下命令: rpm -ivh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noar

  • nginx超时设置详细介绍

    nginx常用的超时配置说明 client_header_timeout 语法 client_header_timeout time 默认值 60s 上下文 http server 说明 指定等待client发送一个请求头的超时时间(例如:GET / HTTP/1.1).仅当在一次read中,没有收到请求头,才会算成超时.如果在超时时间内,client没发送任何东西,nginx返回HTTP状态码408("Request timed out") client_body_timeout 语

  • nginx服务器通过配置来解决API的跨域问题

    前言 最近在采用jquery ajax调用http请求时,发现了一系列问题: 如采用firebug调试API请求(这个API是自己服务器的应用),看到服务器明明返回200状态,response返回数据也是json格式,但ajax返回的error. 在排除json数据格式不正确的原因之后,发现了ajax error函数返回"networkerror failed to execute 'send' on 'xmlhttprequest' failed to load 'http //"

  • Nginx配置解决NetCore的跨域问题

    使用Nginx配置解决NetCore的跨域 废话不多说,直接上Nginx配置 server { listen 80; server_name 你的Id或域名; location / { add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods 'GET,POST,PUT,DELETE,PATCH,OPTIONS'; add_header Access-Control-Allow-Header

  • 在phpstudy集成环境下的nginx服务器下配置url重写

    在phpstudy集成环境下的nginx服务器下配置url重写

    直接在对应的vhosts.conf配置文件的location / {}中添加以下内容: location / { index index.html index.htm index.php; #autoindex on; if (!-e $request_filename) { rewrite ^(.*)$ /index.php?s=/$1 last; break; } 具体操作过程如下: 1.找到对应的vhosts.conf配置文件 2.选择所需要配置重写url的站点 总结 以上所述是小编给大家

  • vue-admin-template解决登录和跨域问题解决

    vue-admin-template解决登录和跨域问题解决

    目录 一.下载安装项目 二.修改登录访问地址 三.解决跨域问题 一.下载安装项目 git地址:https://github.com/PanJiaChen/vue-admin-template.git 二.修改登录访问地址 找到 .env.develpment文件 # just a flag ENV = 'development' # base api # VUE_APP_BASE_API = '/dev-api' VUE_APP_BASE_API = 'http://localhost:9001

  • Java开发中解决Js的跨域问题过程解析

    这篇文章主要介绍了Java开发中解决Js的跨域问题过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 主流方法有JSONP和CORS两种,这里记一下后者的方式,理论基础就是在请求的时候在http请求头中添加如下属性: //指定允许其他域名访问 Access-Control-Allow-Origin:http://localhost:8989 如果后端用Java开发,在返回请求中可以添加如下属性 1.在跨域问题中,如果不操作cookie,只需

  • 解决vue axios跨域 Request Method: OPTIONS问题(预检请求)

    我们在vue开发中用axios进行跨域请求时有时会遇到,同一个接口请求了两次,并且第一次都是options请求,然后才是post/get请求 如下图 options请求 get请求 为什么会出现这种原因呢? 这是因为CORS跨域分为 简单跨域请求和复杂跨域请求: 简单跨域不会发送options请求,复杂跨域会发送一个预检请求options. 1.简单跨域满足的条件 1.请求方式是以下三种之一: HEAD GET POST 2.HTTP的头信息不超出以下几种字段 Accept Accept-Lan

  • 详解Nginx服务器中配置全站HTTPS安全连接的方法

    HTTPS就等于HTTP加上TLS(SSL),HTTPS协议的目标主要有三个: 数据保密性.保证内容在传输过程中不会被第三方查看到.就像快递员传递包裹时都进行了封装,别人无法知道里面装了什么东西.     数据完整性.及时发现被第三方篡改的传输内容.就像快递员虽然不知道包裹里装了什么东西,但他有可能中途掉包,数据完整性就是指如果被掉包,我们能轻松发现并拒收.     身份校验.保证数据到达用户期望的目的地.就像我们邮寄包裹时,虽然是一个封装好的未掉包的包裹,但必须确定这个包裹不会送错地方. 启用

  • Nginx服务器下配置个性二级域名及多个域名的实例讲解

    个性二级域名 配置下个性化二级域名. 效果: 访问的URL http://custom.jb51.net 实际的URL http://www.jb51.net/auth/custom 我们的做法就是通过服务器配置,将访问的url转换为实际的url 下面我们来用nginx配置.配置如下: server { listen 80; server_name *.jb51.net; if ( $host ~* (\b(?!www\b)\w+)\.\w+\.\w+ ) { set $subdomain $1

  • 详解Nginx服务器中配置超时时间的方法

    一.啥时候用到 用来设置请求资源和服务器返回的时间,保证一个请求占用固定时间,超出后报504超时!这样可以保证一个请求占用过长时间. 二.主要参数 使用nginx服务器如果遇到timeou情况时可以如下设置参数,使用fastcgi: fastcgi_connect_timeout 75;  链接 fastcgi_read_timeout 600;   读取 fastcgi_send_timeout 600;   发请求 这两个选项.          fastcgi_read_timeout是指

  • Nginx服务器https配置的方法示例

    Linux:Linux version 3.10.0-123.9.3.el7.x86_64 Nginx:nginx/1.6.3 openssl:1.0.1e 申请证书 目前网上有不少机构提供个人免费 ssl 证书,有效期几个月到几年不等.以 StartSSL :https://www.startssl.com为例, 申请成功后有效期 3 年,到期后可免费续租. 具体申请过程也很简单. 注册登录以后选择 Certificates Wizard >> DV SSL Certificate 申请一个

随机推荐