Apache跨域资源访问报错问题解决方案

很多时候，大中型网站为了静态资源分布式部署，加快访问速度，减轻主站压力，会把静态资源（例如字体文件、图片等）放在独立服务器或者CDN上，并且使用独立的资源域名（例如res.test.com）

但是在实际部署中，会发现浏览器无法载入这些不同域名的资源，firefox控制台会报错：

<span role="presentation" class="objectBox objectBox-errorMessage "><span class="errorMessage ">已阻止跨源请求：同源策略禁止读取位于 http://xxxxx 的远程资源。（原因：CORS 头缺少 'Access-Control-Allow-Origin'）。</span></span>

已阻止跨源请求：同源策略禁止读取位于 http://xxxxx 的远程资源。（原因：CORS 请求失败）。

这是因为现代浏览器将其定义为跨域资源而不允许加载

理解跨域首先必须要了解同源策略。同源策略是浏览器上为安全性考虑实施的非常重要的安全策略。

何谓同源:

URL由协议、域名、端口和路径组成，如果两个URL的协议、域名和端口相同，则表示他们同源。

同源策略:

浏览器的同源策略，限制了来自不同源的"document"或脚本，对当前"document"读取或设置某些属性。 （白帽子讲web安全[1]）
从一个域上加载的脚本不允许访问另外一个域的文档属性。

那么关键是如何解决呢，其实很简单，只要在静态资源服务器上，增加一个头信息：

Access-Control-Allow-Origin *

本文就apache进行操作，nginx大同小异

首先编辑httpd.conf

找到这行

#LoadModule headers_module modules/mod_headers.so

把#注释符去掉

LoadModule headers_module modules/mod_headers.so

目的是开启apache头信息自定义模块

然后在独立资源域名的虚拟主机添加一行

Header set Access-Control-Allow-Origin *

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

重启apache

再访问，OK！

NameVirtualHost 10.0.0.2:80
<VirtualHost 10.0.0.2:80>
  DocumentRoot /var/www/host.example.com
  ServerName host.example.com
  JkMount /webapp/* jkworker
  Header set Access-Control-Allow-Origin "*"
  RewriteEngine on
  RewriteRule  ^/otherhost http://otherhost.example.com/webapp [R,L]
</VirtualHost>

And here's an example of the Apache config for the second:

NameVirtualHost 10.0.1.2:80
<VirtualHost 10.0.1.2:80>
  DocumentRoot /var/www/otherhost.example.com
  ServerName otherhost.example.com
  JkMount /webapp/* jkworker
  Header set Access-Control-Allow-Origin "*"
</VirtualHost>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 解决Linux+Apache服务器URL区分大小写问题

    今天同步碰到一个问题,在浏览器地址栏中输入URL地址时,必须要区分大小写才能正常访问页面,网站服务器是Linux+Apache 造成此现象主要原因是缺少speling模块,因此只要在相应的系统里加载就可以了. 一.Debian系统 debian系统下相对比较简单 1.从路径/etc/apache2/mods-available下找到speling.load ,将其复制到路径 /etc/apache2/mods-enabled 下 2.将文件speling.conf写至目录 /etc/apache

  • 解决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

  • 跨域请求 Apache 服务器配置的方法

    1.修改服务器配置文件 <Directory /www/web/yuming.com/public_html/> Options FollowSymLinks AllowOverride All Require all granted Header set Access-Control-Allow-Origin * </Directory> 2.编辑httpd.conf 找下面这行,把#去掉,目的是开启apache头信息自定义模块 #LoadModule headers_modul

  • 详解apache配置域名的坑

    没有用过apache,出来工作后,一直都是nginx(不是运维),最近朋友的一个小项目出了点问题.接触到apache. 首先.配置域名,监听889这个端口 第二步,重启apache /www/server/apache/bin/apachectl restart 第三步,外网浏览器访问 ,访问不了 第四步.排查原因 1. 在服务器上本地 curl localhost:889 访问,连接拒绝 2.查看端口的使用情况  lsof -i:889 3.查询了一下监听 netstat -tnl. 监听是正

  • Ubuntu 18.04上安装Apache、MySQL、PHP、LAMP的完整教程

    1.安装 Apache $ sudo apt update && sudo apt install apache2 中间会遇到停顿询问是否继续, 输入 y 然后 回车. 2.测试 Apache 通过查看 Apache 服务的状态,检查 Apache 是否安装正确. $ sudo service apache2 status 查看完状态, 你需要按下 q 退出, Apache server的状态. 查看之后,知道Apache的服务已经起来了,那么下一步应该去查看一些Apache web页面.

  • Apache中配置支持CORS（跨域资源共享）实例

    Apache中配置支持CORS（跨域资源共享）实例

    当使用ajax跨域请求时,浏览器报错:XmlHttpRequest error: Origin null is not allowed by Access-Control-Allow-Origin.肯定是跨域的问题,如果用jsonp或者proxy的方式进行修改的话未免需要太大的工程量,所以采用CORS这种比较简单高效的技术.相比JOSP的方式,CORS更为高效.JSONP由于它的原理只能实现GET请求,而CORS支持所有类型的HTTP请求.使用CORS,可以使用普通的ajax实现跨域,这对于前端

  • php apache开启跨域模式过程详解

    apaceh 配置: <VirtualHost *:80> ServerAdmin xxx@qq.com DocumentRoot "C:/htdocs/demo" ServerName dev.dd.cn ##ErrorLog "logs/dummy-host.localhost-error.log" ##CustomLog "logs/dummy-host.localhost-access.log" combined <Di

  • Java常用类库Apache Commons工具类说明及使用实例详解

    Java常用类库Apache Commons工具类说明及使用实例详解

    Apache Commons包含了很多开源的工具,用于解决平时编程经常会遇到的问题,减少重复劳动.下面是我这几年做开发过程中自己用过的工具类做简单介绍. 组件 功能介绍 BeanUtils 提供了对于JavaBean进行各种操作,克隆对象,属性等等. Betwixt XML与Java对象之间相互转换. Codec 处理常用的编码方法的工具类包 例如DES.SHA1.MD5.Base64等. Collections java集合框架操作. Compress java提供文件打包 压缩类库. Con

  • Apache跨域资源访问报错问题解决方案

    很多时候,大中型网站为了静态资源分布式部署,加快访问速度,减轻主站压力,会把静态资源(例如字体文件.图片等)放在独立服务器或者CDN上,并且使用独立的资源域名(例如res.test.com) 但是在实际部署中,会发现浏览器无法载入这些不同域名的资源,firefox控制台会报错: <span role="presentation" class="objectBox objectBox-errorMessage "><span class="

  • 动态创建script标签实现跨域资源访问的方法介绍

    login.html 复制代码 代码如下: <script> function request(id,url){     oScript = document.getElementById(id);     var head = document.getElementsByTagName("head").item(0);     if (oScript) {        head.removeChild(oScript);     }     oScript = docu

  • Springboot 跨域配置无效及接口访问报错的解决方法

    跨域配置如下,Springboot 版本为 2.4.1 ///跨域访问配置 @Configuration public class CorsConfig { private CorsConfiguration buildConfig() { CorsConfiguration corsConfiguration = new CorsConfiguration(); corsConfiguration.setAllowCredentials(true); //sessionid 多次访问一致 co

  • ajax跨域访问报错501的解决方法

    问题:ajax跨域访问报错501 运行下面的代码会报错501 $.ajax({ type: "POST", url: "http://192.168.1.202/sensordata.php", contentType:'application/json; charset=utf-8', data: JSON.stringify(ajaxPostData), dataType:'json', success: function(data){ //On ajax su

  • React Native 真机断点调试+跨域资源加载出错问题的解决方法

    React Native 真机断点调试+跨域资源加载出错问题的解决方法

    写在前面 闲来无事,折腾了一下React Native,相比之前,开发体验好了不少.但在真机断点调试那里遇到了跨域资源加载出错的问题,一番探索总算解决,目测是RN新版本调试服务的bug. 遇到类似问题的同学应该不少,这里做下记录,有需要的可以参考下. 如何断点调试 首先,在真机上加载运行RN应用(过程略). 然后,摇动手机,弹出开发菜单,选择"Debug JS Remotely". chrome会自动打开调试界面,地址是 http://localhost:8081/debugger-u

  • iframe与主框架跨域相互访问实现方法

    iframe与主框架跨域相互访问实现方法

    1.同域相互访问 假设A.html 与 b.html domain都是localhost (同域) A.html中iframe 嵌入 B.html,name=myframe A.html有js function fMain() B.html有js function fIframe() 需要实现 A.html 调用 B.html 的 fIframe(),B.html 调用 A.html 的 fMain() A.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD H

  • Vue3打包部署报错的解决方案

    Vue3打包部署报错的解决方案

    目录 Vue3打包部署报错 vue3 vite 打包部署后,访问报错 Vue3打包部署报错 通常情况下,我们直接npm run build后的代码可以直接部署在服务器上,以便老板远程访问.但是今天写了个简单的demo发现部署后不能直接访问.作为一个菜鸟,被领导催的也是心急如焚. 但奇怪的是,vscode的open live server却没有任何问题. 冥思苦想苦思冥想无法解决,问了同事大佬,原来是要在打包前的vue config下加一下publicPath:‘./’: 于是重新打包,再部署到服

  • npm i报错以及解决方案实战案例

    npm i报错以及解决方案实战案例

    目录 报错案例1 报错案例2 报错案例3 报错案例4 报错案例5 总结 报错案例1 npm ERR! Cannot read properties of null (reading 'pickAlgorithm') 解决方案:清理缓存后再次安装 npm cache clear --force 报错案例2 npm ERR! gyp info it worked if it ends with ok ... npm ERR! gyp ERR! cwd C:\...\node_modules\node

  • Luckysheet 在vue中离线使用及引入报错的解决方案(推荐)

    目录 1.git下载源码运行打包dist 2.将dist文件引入项目 3.应用 4.常见报错 1.git下载源码运行打包dist git 源码地址:https://github.com/mengshukeji/Luckysheet 下载好源码之后执行 npm install npm install gulp -g //跑去源码看看正常与否 npm run dev //如果正常执行打包 npm run build 打包结束后在目录下找到 dist 文件 2.将dist文件引入项目 将dist离线包

  • SpringBoot集成MybatisPlus报错的解决方案

    SpringBoot集成MybatisPlus报错的解决方案

    这篇文章主要介绍了SpringBoot集成MybatisPlus报错的解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 问题 启动的时候总是报如下错误: java.lang.annotation.AnnotationFormatError: Invalid default: public abstract java.lang.Class 解决方案 需要一个mybatis-spring-boot-starter的包,在pom文件加上之后,完

随机推荐