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实现跨域，这对于前端来说是极大的福音了,这个技术被现在大多数浏览器所普遍支持，因为跨域已经是普遍的要求，浏览器肯定会逐渐流出适当的‘后门'出来专门用以跨域。

浏览器支持情况

经本人测试IE浏览器中IE10及以上才可正常发送请求

1.服务器端对于CORS的支持，是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置，就可以允许Ajax进行跨域的访问，也就是相应的‘后门'。

设置Apache：Apache需要使用mod_headers模块来激活HTTP头的设置，它默认是激活的。你只需要修改Apache配置文件中的httpd.conf文件：

原始代码

代码如下:

<Directory />
AllowOverride none
Require all denied
</Directory>

改为下面代码

代码如下:

<Directory />
Require all denied
Header set Access-Control-Allow-Origin *
</Directory>

在处理请求的PHP文件中设置：

代码如下:

<?php
    header("Access-Control-Allow-Origin:*");
    //处理请求输出数据

?>

配置的含义是允许任何域发起的请求都可以获取当前服务器的数据。当然，这样有很大的危险性，恶意站点可能通过XSS攻击我们的服务器。所以我们应该尽量有针对性的对限制安全的来源，例如下面的设置使得只有http://jb51.net/这个域才能跨域访问服务器的API。

httpd.conf中：


代码如下:

Header set Access-Control-Allow-Origin http://www.jb51.net

php文件中：

代码如下:

<?php
header("Access-Control-Allow-Origin:http://www.jb51.net");

前台代码：


代码如下:

<script type="text/javascript">
function createCORSRequest(method, url) {
var xhr = new XMLHttpRequest();
if ("withCredentials" in xhr) {
// 此时即支持CORS的情况
// 检查XMLHttpRequest对象是否有“withCredentials”属性
// “withCredentials”仅存在于XMLHTTPRequest level 2对象里
} else {
// 否则检查是否支持XDomainRequest
// XDomainRequest仅存在于IE中，是IE用于支持CORS请求的方式
xhr = new XDomainRequest();
}
xhr.open(method, url, true);
xhr.send();
xhr.onload = function(){
alert(xhr.responseText);
}
}
createCORSRequest('GET', "http://192.168.1.58/t.php");
</script>

赞 (0)

相关推荐

  • 跨域请求的完美解决方法(JSONP, CORS)

    一个众所周知的问题,Ajax直接请求普通文件存在跨域无权限访问的问题.解决方法有JSONP,Flash等等. JSONP 我们发现,Web页面上调用js文件时不受是否跨域的影响,凡是拥有"src"这个属性的标签都拥有跨域的能力,比如<script>.<img>.<iframe>.那就是说如果要跨域访问数据,就服务端只能把数据放在js格式的文件里.恰巧我们知道JSON可以简洁的描述复杂数据,而且JSON还被js原生支持,所以在客户端几乎可以随心所欲的处

  • Node.js设置CORS跨域请求中多域名白名单的方法

    CORS 说到CORS,相信前端儿都不陌生,这里我就不多说了,具体可以看看这篇文章. CORS,主要就是配置Response响应头中的 Access-Control-Allow-Origin 属性为你允许该接口访问的域名.最常见的设置是: res.header('Access-Control-Allow-Origin', '*'); res.header('Access-Control-Allow-Credentials', 'true'); // 允许服务器端发送Cookie数据 然而,这样的

  • 跨域资源共享 CORS 详解

    跨域资源共享 CORS 详解

    它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制. 本文详细介绍CORS的内部机制. (图片说明:摄于阿联酋艾因(Al Ain)的绿洲公园) 一.简介 CORS需要浏览器和服务器同时支持.目前,所有浏览器都支持该功能,IE浏览器不能低于IE10. 整个CORS通信过程,都是浏览器自动完成,不需要用户参与.对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样.浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,有时还会

  • JS跨域解决方案之使用CORS实现跨域

    JS跨域解决方案之使用CORS实现跨域

    引言 跨域是我在日常面试中经常会问到的问题,这词在前端界出现的频率不低,主要原因还是由于安全限制(同源策略, 即JavaScript或Cookie只能访问同域下的内容),因为我们在日常的项目开发时会不可避免的需要进行跨域操作,所以跨域能力也算是前端工程师的基本功之一. 和大多数跨域的解决方案一样,JSONP也是我的选择,可是某天PM的需求变了,某功能需要改成支持POST,因为传输的数据量比较大,GET形式搞不定.所以折腾了下闻名已久的CORS(跨域资源共享,Cross-Origin Resour

  • js实现跨域的几种方法汇总（图片ping、JSONP和CORS）

    跨域 虽然有同源策略的存在,但是在js中跨域也依然很常见,有document.domain.window.name.图片ping.jsonp.CORS,在这里简单总结下图片ping.jsonp和CORS备忘. 图片ping 图片可以从任何URL中加载,所以将img的src设置成其他域的URL,即可以实现简单的跨域,可以使用onload和onerror事件来确定是否接受到了响应. var img=new Image(); img.src='http://www.jb51.net'; img.one

  • 使用CORS实现JavaWeb跨域请求问题的方法

    之前用jsonp 解决跨域问题,现在用CORS实现跨域请求解决java 跨域问题: 主要代码如下 package com.hy.fliter; import java.io.IOException; import javax.servlet.Filter; import javax.servlet.FilterChain; import javax.servlet.FilterConfig; import javax.servlet.ServletException; import javax.

  • 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实现跨域,这对于前端

  • 你可能不知道的CORS跨域资源共享

    你可能不知道的CORS跨域资源共享

    什么是CORS? 默认情况下,为预防某些而已行为,浏览器的XHR对象只能访问来源于同一个域中的资源.但是我们在日常实际开发中,常常会遇到跨域请求的需求,因此就出现了一种跨域请求的方案:CORS(Cross-Origin Resource Sharing)跨域资源共享. CORS背后的原理是:使用自定的HTTP头部与服务器进行沟通,从而由服务器决定响应是否成功. 了解下同源策略 源(origin)*:就是协议.域名和端口号: 同源: 就是源相同,即协议.域名和端口完全相同: 同源策略:同源策略是浏

  • 使用SpringCloudApiGateway之支持Cors跨域请求

    问题背景 公司的项目需要前后端分离,vue+java,这时候就需要支持Cors跨域请求了.最近对zuul进行升级,假如说zuul是1.0的话,api gateway就是2.0的网关,支持ws等,基于NIO,各方面还是强大的. 解决方案 新建一个Configuration类即可 import org.springframework.cloud.client.discovery.DiscoveryClient; import org.springframework.cloud.gateway.dis

  • react中fetch之cors跨域请求的实现方法

    项目中使用了react,当中需要使用fetch来代替ajax. 由于react的create_react_app工具很方便,基本上开箱即用,经过创建项目,输入npm start命令后,便自动监听一个3000的端口,到此前端部分就绪. 具体参考:https://github.com/facebookincubator/create-react-app 后端部分我使用了phalcon. 由于前后端分离,为了方便,我尝试在nginx中使之同域(前端和后台api的顶级域名相同),但phalcon框架是单

  • Django跨域资源共享问题(推荐)

    最近做了一个前后端分离的web项目,其中我司职后端,使用django框架.在前后端集成测试的时候,就遇到了一些web安全相关的问题,cors跨域资源共享就是其中之一. cors问题介绍 跨域资源共享(CORS) 是一种机制,它使用额外的 HTTP 头来告诉浏览器 让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源.当一个资源从与该资源本身所在的服务器不同的域.协议或端口请求一个资源时,资源会发起一个跨域 HTTP 请求. CORS机制允许 Web

  • 谈谈如何在ASP.NET Core中实现CORS跨域

    谈谈如何在ASP.NET Core中实现CORS跨域

    CORS(Cross-origin resource sharing)是一个W3C标准,翻译过来就是 "跨域资源共享",它主要是解决Ajax跨域限制的问题. CORS需要浏览器和服务器支持,现在所有现代浏览器都支持这一特性.注:IE10及以上 只要浏览器支持,其实CORS所有的配置都是在服务端进行的,而前端的操作浏览器会自动完成. 在本例中,将演示如何再ASP.NET Core中实现CORS跨域. 前期准备 你需要windows系统. 你需要安装IIS. 推荐使用VS2015 Upda

  • 浅析jsopn跨域请求原理及cors（跨域资源共享）的完美解决方法

    浅析jsopn跨域请求原理及cors（跨域资源共享）的完美解决方法

    由于同源策略的缘故,ajax不能向不同域的网站发出请求. 比如a站localhost需要向b站请求数据,地址为:http://www.walk-sing.com/api.php 请求的代码如下: <html> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript"> $.get

  • Flask配置Cors跨域的实现

    1 跨域的理解 跨域是指:浏览器A从服务器B获取的静态资源,包括Html.Css.Js,然后在Js中通过Ajax访问C服务器的静态资源或请求.即:浏览器A从B服务器拿的资源,资源中想访问服务器C的资源. 同源策略是指:浏览器A从服务器B获取的静态资源,包括Html.Css.Js,为了用户安全,浏览器加了限制,其中的Js通过Ajax只能访问B服务器的静态资源或请求.即:浏览器A从哪拿的资源,那资源中就只能访问哪. 同源是指:同一个请求协议(如:Http或Https).同一个Ip.同一个端口,3个全

  • Spring boot 和Vue开发中CORS跨域问题解决

    跨域资源共享CORS(Cross-origin Resource Sharing),是W3C的一个标准,允许浏览器向跨源的服务器发起XMLHttpRequest请求,克服ajax请求只能同源使用的限制.关于CORS的详细解读,可参考阮一峰大神的博客:跨域资源共享CORS详解. 1. 遇到的问题: 我用spring-boot 做Rest服务,Vue做前端框架,用了element-admin-ui这个框架做后台管理.在调试的过程中遇到了如下错误: Preflight response is not

  • Springboot处理配置CORS跨域请求时碰到的坑

    Springboot处理配置CORS跨域请求时碰到的坑

    最近开发过程中遇到了一个问题,之前没有太注意,这里记录一下.我用的SpringBoot版本是2.0.5,在跟前端联调的时候,有个请求因为用户权限不够就被拦截器拦截了,拦截器拦截之后打印日志然后response了一个错误返回了,但是前端Vue.js一直报如下跨域的错误,但是我是配置了跨域的. has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested res

随机推荐