基于目前前后端分离的趋势和微前端解决方案，并且很多web服务部署在Nginx服务器上，那么因为前后端分离导致的跨域问题需要迫切得到解决。因为是否允许跨域的因素有协议、域名、端口，只要有一个不一致就算跨域。大部分需求要求一个一级域名下所有子域名都被允许跨域，一个一个枚举配置十分繁琐，且要发版，为了规避这些问题，解决方案如下：

方案一：

map $http_origin $corsHost {default *; # 写上自己的默认值"~https://csdn.net" https://csdn.net;
}
server {location / {add_header 'Access-Control-Allow-Origin' $corsHost;...}
}

方案二（允许所有.csdn.net(:[0-9]+)?结尾origin携带cookie跨域）推荐使用

map $http_origin $corsHost {default "";"~\.csdn\.net(:[0-9]+)?$" "$http_origin";
}server {location / {add_header 'Access-Control-Allow-Origin' $corsHost;add_header 'Access-Control-Allow-Credentials' 'true';# 下面两个属性可以酌情增减add_header 'Access-Control-Allow-Headers' '*';add_header 'Access-Control-Allow-Methods' '*';}
}

方案三

location / {set $cors "";if ($http_origin ~* \.csdn\.net(:[0-9]+)?$) {set $cors "true";}if ($cors = "true") {add_header 'Access-Control-Allow-Origin' "$http_origin";add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE, PUT';add_header 'Access-Control-Allow-Credentials' 'true';add_header 'Access-Control-Allow-Headers' 'User-Agent,Keep-Alive,Content-Type';}
}

允许同站跨域Nginx配置方案相关推荐

Node.JS跨域请求配置方案
今天在用node开发的过程中,再次遇到同源策略的问题: 在客户端调用服务端获取数据时,Chrome 浏览器中报错如下: Access to XMLHttpRequest at 'http://loca ...
Amazon CloudFront CDN + s3 源站跨域配置
Amazon CloudFront CDN + s3 源站跨域配置问题描述使用 Amazon CloudFront CDN + s3 源站托管前端静态页面,前端跨域请求时报错: ...blocke ...
Nginx 指定多个域名跨域请求配置
nginx指定多个域名跨域请求配置什么是跨域假设我们页面或者应用已在 http://www.test1.com 上了,而我们打算从 http://www.test2.com 请求提取数据.一般情况 ...
vue脚手架解决跨域问题-------配置反向代理
vue脚手架解决跨域问题-------配置反向代理参考文章: (1)vue脚手架解决跨域问题-------配置反向代理 (2)https://www.cnblogs.com/zbx-boke/p/9 ...
django允许跨域请求配置
2019独角兽企业重金招聘Python工程师标准>>> django允许跨域请求配置下载corsheader pip install django-cors-headers 修改s ...
proxy代理的使用（解决跨域，配置多个代理）
proxy代理的使用(解决跨域,配置多个代理) 一.什么是代理字面意思就是类似中间商,开启代理,原理就是在本地创建一个虚拟服务器,发送请求数据,同时接受请求的数据, 利用服务器与服务器间,交互,不会 ...
Nginx跨域解决配置示例
简介在日常学习和工作开发中,需要请求两个不同配置的请求经常存在,本文介绍如果还使用Nginx配置解决其跨域问题相关理论首先需要了解什么是跨域,下面的两个文章说的很好,请仔细阅读后,然后自己去动手 ...
服务端解决跨域问题的方案（二）
一分钟说明本文主要基于Nginx的配置来解决服务端跨域问题. 涉及知识点: - Nginx的配置 Nginx的跨域配置 location /project {proxy_pass http://10 ...
h5跨域访问图片_网页保存为图片及高清截图的优化 | canvas跨域图片配置
本次技术调研来源于H5项目中的一个重要功能需求:实现微信长按网页保存为截图. 这里有个栗子(请用微信打开,长按图片即可保存):3分钟探索你的知识边界将整个网页保存为图片是一个十分有趣的功能,常见于H ...

允许同站跨域Nginx配置方案

方案一：

方案二（允许所有.csdn.net(:[0-9]+)?结尾origin携带cookie跨域）推荐使用

方案三

允许同站跨域Nginx配置方案相关推荐

最新文章

热门文章