解决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 *:88>
 ServerAdmin admin@example.com
 DocumentRoot "****************"
 ServerName www.jb51.com
 Header set Access-Control-Allow-Origin *

 ErrorLog "***********"
 CustomLog "****************************" common
<Directory "**************">
 SetOutputFilter DEFLATE
 Options FollowSymLinks ExecCGI
 Require all granted
 AllowOverride All
 Order allow,deny
 Allow from all
 DirectoryIndex index.html index.php
</Directory>
</VirtualHost>
ApacheCopy

意思是对这个域名的资源进行访问时，添加一个头信息

重启apache

service httpd restart

2. nginx静态资源允许跨域访问

同理 找到相应域名配置文件

在server模块中添加配置：

add_header ‘Access-Control-Allow-Origin' ‘*';

例：

server {
    listen    80;
    add_header 'Access-Control-Allow-Origin' '*';
    location /Roboto/ {
      root  /home/images;
      autoindex on;
    }
  }

nginx重载

./nginx -s reload

通过以上方法配置完后，再次跨域访问静态资源就没有问题了

以上既是nginx/apache静态资源允许跨域访问解决方法

赞 (0)

相关推荐

  • 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解决前端跨域问题

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

  • 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

  • 利用Nginx反向代理解决跨域问题详解

    利用Nginx反向代理解决跨域问题详解

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

  • 利用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配置跨域请求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

  • JavaScript同源策略和跨域访问实例详解

    本文实例讲述了JavaScript同源策略和跨域访问.分享给大家供大家参考,具体如下: 1. 什么是同源策略 理解跨域首先必须要了解同源策略.同源策略是浏览器上为安全性考虑实施的非常重要的安全策略. 何谓同源: URL由协议.域名.端口和路径组成,如果两个URL的协议.域名和端口相同,则表示他们同源. 同源策略: 浏览器的同源策略,限制了来自不同源的"document"或脚本,对当前"document"读取或设置某些属性. (白帽子讲web安全[1]) 从一个域上加

  • Nginx 过滤静态资源文件的访问日志的实现

    凌乱的日志 日常使用的 Nginx 大都既做静态资源服务器,也做反向代理服务器,尤其有些时候考虑到跨域问题,会对静态资源和后端接口使用同一个监听端口,如果不做一下过滤处理,会在 access_log 中看到大量的例如 js.css.jpg 等静态资源的请求,比较影响查看后端接口调用的日志 本来没有很在意这个东西,不过在浏览一篇关于 Nginx 优化的文章时,发现了一种用 map 定义一个是否写日志的参数的方法,结合最近使用 map 做动态的跨域配置,索性也是学习及记录一下 map 的另一个使用场

  • AJAX跨域问题解决方案详解

    AJAX跨域问题解决方案详解

    目录 1.前言 2.解决方案 2.1 设置响应头 2.2 jsonp 2.2.1 前端代码 2.2.2 后端代码 2.3 使用jQuery封装的jsonp 2.4 代理机制(httpclient) 2.4.1 前端代码 2.4.2 代理Servlet代码 2.4.3 目标Servlet代码 2.4.4 图示 2.5 nginx反向代理 1.前言 跨域简单的说,就是从一个域名的网页去访问另一个域名网页的资源. 通过超链接或者form表单提交或者window.location.href的方式进行跨域

  • JS JSOP跨域请求实例详解

    在项目开发中遇到跨域的问题,一般都是通过JSONP来解决的.但是JSONP到底是个什么东西呢,实现的原理又是什么呢.在项目的空闲时间可以好好的来研究一下了. 1.什么是JSONP? 要了解JSONP,不得不提一下JSON,那么什么是JSON? JSON is a subset of the object literal notation of JavaScript. Since JSON is a subset of JavaScript, it can be used in the langu

  • Spring boot跨域设置实例详解

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

  • 关于python 跨域处理方式详解

    因为浏览器的同源策略限制,不是同源的脚本不能操作其他源下面的资源,想操作另一个源下面的资源就属于跨域了,这里说的跨域是广义跨域,我们常说的代码中请求跨域,是狭义的跨域,即在脚本代码中向非同源域发送http请求 浏览器的同源策略(SOP/same origin policy)是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS(跨站脚本攻击 cross site scripting)和CSRF(跨站请求伪造cross-site request forgery)等攻击. (同

  • JSONP跨域请求实例详解

    JSOP简介 JSONP(JSON with Padding)是JSON的一种"使用模式",可用于解决主流浏览器的跨域数据访问的问题.由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的<script> 元素是一个例外.利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP.用 JSON

  • Spring实现处理跨域请求代码详解

    一次正常的请求 最近别人需要调用我们系统的某一个功能,对方希望提供一个api让其能够更新数据.由于该同学是客户端开发,于是有了类似以下代码. @RequestMapping(method = RequestMethod.POST, value = "/update.json", produces = MediaType.APPLICATION_JSON_VALUE) public @ResponseBody Contacter update(@RequestBody Contacter

随机推荐