Nginx 跨域设置

web应用通常会碰到跨域的问题,特别是在将字体文件放在另一个域名下(cdn缓存)的时候会出现无法访问的问题,浏览器会报如下错误警告:

Font from origin ‘http://cdn.xxxx.com‘ has been blocked from loading by Cross-Origin Resource Sharing policy: 
No ‘Access-Control-Allow-Origin‘ header is present on the requested resource. Origin ‘http://www.xxxx.com‘ 
is therefore not allowed access.

意思是说 http://www.xxxx.com 不被 http://cdn.xxxx.com 服务跨域允许,需要在 nginx 的 cdn.xxxx.com服务的配置中加上跨域允许的配置:

         add_header Access-Control-Allow-Origin http://www.xxxx.com;
add_header Access-Control-Allow-Headers Origin,X-Requested-With,Content-Type,Accept;
add_header Access-Control-Allow-Methods POST,GET;
add_header Access-Control-Allow-Credentials true;

重启nginx就能解决这个问题。

时间: 2024-10-05 14:16:14

Nginx 跨域设置的相关文章

nginx跨域设置

nginx跨域问题例子:访问http://10.0.0.10/ 需要能实现跨域 操作:http://10.0.0.10/项目是部署在tomcat里面,tomcat跨域暂时还不会,按照网上的方法操作也没成功只有用Nginx做个代理,解决跨域问题了! 1.将www.tangxiaoyue.com域名指向http://10.0.0.11/.只有在域名上设置才能实现跨域.(10.0.0.11是Nginx的IP)2.在nginx上的配置文件tang.conf进行设置 配置文件例如: server { li

学习-【前端】-关于nginx跨域的配置

一般来说我们的网站都是要使用代理服务器来分配不同端口,这里就nginx介绍,我们的混合app需要用到跨域的设置来完成数据交互,那么这里给出nginx跨域设置,当然,这里设置完本身后台服务器也要设置哦. location ^~/abc { add_header "Access-Control-Allow-Origin"  ""; add_header "Access-Control-Allow-Headers"  "Content-Typ

vue-cli的跨域设置

概述 今天打算快速使用vue-cli建立一个小应用用于测试,使用axios发送http请求,但是遇到了跨域问题,总结了一下,供以后开发时参考,相信对其他人也有用. vue-cli的跨域设置 在vue.config.js里面的devServer的proxy加入如下设置. // vue.config.js const tableauApi = 'https://tableau.proxy.web.yimian.com.cn/'; module.exports = { devServer: { pro

nginx跨域了解与模拟与解决

模拟由于跨域访问导致的浏览器报错,在nginx代理服务器上设置相应参数解决 nginx 跨域一.同源策略何为同源:1.协议(http/https)相同2.域名(IP)相同3.端口相同 浏览器遵循同源策略的目的同源策略的目的是为了保证用户信息的安全,防止恶意的网站窃取数据.此策略可以防止一个页面的恶意脚本(JavaScript语言编写的程序)通过该页面的文档对象模型来访问另一网页上的敏感数据. 同源策略是必需的,否则cookie可以共享,互联网就毫无安全可言,同源策略仅适用于JavaScript脚

chrome跨域设置

最近在学习Angular路由,用版本为54.0的chrome运行示例中的html时出现禁止跨域现象,如下: google了下解决方法,转载如下,原文地址:http://www.cnblogs.com/cshi/p/5660039.html 做前后分离的webapp开发的时候,出于一些原因往往需要将浏览器设置成支持跨域的模式,好在chrome浏览器就是支持可跨域的设置,网上也有很多chrome跨域设置教程.但是新版本的chrome浏览器提高了跨域设置的门槛,原来的方法不再适用了.下面笔者简单介绍一

chrome浏览器的跨域设置——包括版本49前后两种设置

做前后分离的webapp开发的时候,出于一些原因往往需要将浏览器设置成支持跨域的模式,好在chrome浏览器就是支持可跨域的设置,网上也有很多chrome跨域设置教程.但是新版本的chrome浏览器提高了跨域设置的门槛,原来的方法不再适用了.下面笔者简单介绍一下新版本chrome的跨域设置方法. 版本号49之前的跨域设置 先介绍一下老方法,参考了一些网上的教程,其实直接在打开命令上加--disable-web-security就可以了. 具体做法为: 1.下载并安装好chorme浏览器后在桌面找

【JavaScript】JS跨域设置和取Cookie

cookie 是存储于访问者的计算机中的变量.每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie.你可以使用 JavaScript 来创建和取回 cookie 的值.本文主要JS怎样读取Cookie以及域的设置. AD: 在Javascript脚本里,一个cookie 实际就是一个字符串属性.当你读取cookie的值时,就得到一个字符串,里面当前WEB页使用的所有cookies的名称和值.每个cookie除了 name名称和value值这两个属性以外,还有四个属性.这些属性是:

windows & mac chrome浏览器的跨域设置—包括版本49前后两种设置

做前后分离的webapp开发的时候,出于一些原因往往需要将浏览器设置成支持跨域的模式,好在chrome浏览器就是支持可跨域的设置,网上也有很多chrome跨域设置教程.但是新版本的chrome浏览器提高了跨域设置的门槛,原来的方法不再适用了.下面笔者简单介绍一下新版本chrome的跨域设置方法. 版本号49之前的跨域设置 先介绍一下老方法,参考了一些网上的教程,其实直接在打开命令上加--disable-web-security就可以了. 具体做法为: 1.下载并安装好chorme浏览器后在桌面找

openlayers跨域设置后出现http status 500错误

最近需要弄一下地理信息系统,用到openlayers和geoserver.在解决跨域的时候出现如下问题.求解决方案啊. 问题如下: 附:已经安装了python27,环境变量path中也添加了:c:\Python27 参考了http://www.360doc.com/content/13/1005/23/7669533_319260563.shtml这篇文章设置后,打开http://localhost:8080/gis/cgi/proxy.cgi 得到的页面如下: openlayers跨域设置后出