在我们的开发中,经常遇到跨域,这个时候,可以通过cors来解决。

解决的方法可以在服务端的代码层或者在web服务器进行设置

在web服务器上进行设置cors 跨域,这样就不必改动代码。以nginx为例子

提示:有时候我们的后端是PHP文件,则需要把跨域的代码加 location ~ \.php(.*)$ 中。

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,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,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,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-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,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
}
}

  另外一种可以设置反向代理

location ^~ /api/v1 {
add_header 'Access-Control-Allow-Origin' "$http_origin";
add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, 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-Allow-Credentials' 'true';
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' "$http_origin";
add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, 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-Allow-Credentials' 'true';
add_header 'Access-Control-Max-Age' 1728000; # 20 天
add_header 'Content-Type' 'text/html charset=UTF-8';
add_header 'Content-Length' 0;
return 200;
}
# 这下面是要被代理的后端服务器,它们就不需要修改代码来支持跨域了
proxy_pass http://127.0.0.1:8085;
proxy_set_header Host $host;
proxy_redirect off;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_connect_timeout 60;
proxy_read_timeout 60;
proxy_send_timeout 60; }

  

Nginx 设置cors跨域的更多相关文章

  1. phpstudy nginx设置CORS跨域不起作用的可能解决方法

    今天搞了半天的跨域问题,想通过nginx配置跨域,希望以后本地调试程序都不用为这件事烦心.无非就是设置几个请求头: add_header Access-Control-Allow-Origin *; ...

  2. jquery设置cors跨域

    老版写法 $.support.cors = true; 新版写法 crossDomain: true

  3. CORS跨域-Nginx使用方法(Access-Control-Allow-Origin错误提示)

    问题说明 当出现上图这个的时候,是访问请求外域URL无法访问,浏览器认为访问外域URL不安全,导致访问不了简称跨域问题.而这上面出现一句很重要的话“NO Access-Control-Allow-Or ...

  4. CORS跨域与Nginx反向代理跨域优劣对比

    最近写了一些关于前后端分离项目之后,跨域相关方案的基本原理和常见误区的帖子,主要包括CORS和Nginx反向代理.这两种方案项目中都有在用,各有优缺,关于具体使用哪种方案,大家的观点也不大一致,本文主 ...

  5. ajax——CORS跨域调用REST API 的常见问题以及前后端的设置

    RESTful架构是目前比较流行的一种互联网软件架构,在此架构之下的浏览器前端和手机端能共用后端接口. 但是涉及到js跨域调用接口总是很头疼,下边就跟着chrome的报错信息一起来解决一下. 假设:前 ...

  6. Nginx CORS 跨域资源共享问题

    ## 背景 新项目上线,前后端分离,遇到了跨域资源共享的问题,导致请求根本无法发送到后端,前端和后端貌似只能有一个来处理跨域问题,我们这边要采用nginx来解决跨域问题. ## Nginx的CORS配 ...

  7. CORS 跨域 实现思路及相关解决方案

    本篇包括以下内容: CORS 定义 CORS 对比 JSONP CORS,BROWSER支持情况 主要用途 Ajax请求跨域资源的异常 CORS 实现思路 安全说明 CORS 几种解决方案 自定义CO ...

  8. jsonp与cors跨域的一些理解(转)

    CORS其实出现时间不短了,它在维基百科上的定义是:跨域资源共享(CORS )是一种网络浏览器的技术规范,它为Web服务器定义了一种方式,允许网页从不同的域访问其资源.而这种访问是被同源策略所禁止的. ...

  9. spring boot / cloud (六) 开启CORS跨域访问

    spring boot / cloud (六) 开启CORS跨域访问 前言 什么是CORS? Cross-origin resource sharing(跨域资源共享),是一个W3C标准,它允许你向一 ...

随机推荐

  1. 使用Apache FtpServer搭建FTP服务器 [FlashFXP]

    <server xmlns="http://mina.apache.org/ftpserver/spring/v1" xmlns:xsi="http://www.w ...

  2. android 之修改图片的某一颜色值

    首先我们来创建一个叫Image的类,这个类主要用来处理与图有关的一些操作. package org.cn.tools; import java.io.IOException; import java. ...

  3. html5-2 html实体和颜色有哪些

    html5-2 html实体和颜色有哪些 一.总结 一句话总结:网站配色用安全色. 1.颜色用什么类型的颜色(安全色)? 直接百度搜 安全色 即可 2.html实体常用哪6个,头尾符号是什么? 头是取 ...

  4. 你的薪水增速跑赢GDP了没

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZm9ydW9r/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/d ...

  5. [Postgres] Group and Aggregate Data in Postgres

    How can we see a histogram of movies on IMDB with a particular rating? Or how much movies grossed at ...

  6. ASP.net 中 OutputCache 指令各个参数的作用。

    使用@ OutputCache指令 使用@ OutputCache指令,能够实现对页面输出缓存的一般性需要.@ OutputCache指令在ASP.NET页或者页中包含的用户控件的头部声明.这种方式非 ...

  7. show binlog events 命令查看某个binlog日志内容

    mysql> show binlog events [IN 'log_name'] [FROM pos] [LIMIT [offset,] row_count];   选项解析:   IN 'l ...

  8. 【codeforces 750D】New Year and Fireworks

    time limit per test2.5 seconds memory limit per test256 megabytes inputstandard input outputstandard ...

  9. 数组[0]和[firstobject]的区别

    数组[0]和[firstobject]的区别   [0]:数组为空时回报错 [firstobject]:数组为空时回返回nil

  10. 详细回复某个CSDN网友,对我的文章和技术实力以及CSDN的吐槽

    貌似被大学生鄙视了,我也是醉了,现在的大学生水平和信心,都这么高了~ 看来,我得加把劲了~ o(︶︿︶)o 电子商务系列文章,是我闲来无事,分享自己的一些业余实践经验的文章.其中关于数据库设计的这一篇 ...