ajax跨域之CORS

跨域

背景

同源策略:不同域的客户端脚本在没有明确授权的情况下,不能读写对方资源
由于浏览器同源策略的存在,使得某些场景下需要跨域获取数据的场景就需要一些方法来实现跨域请求

同域:同协议 同域名 同端口

跨域手段1-CORS

举例

服务器A客户端代码

<body>
<button id="btn">点击加载数据</button>
<button id="btn-origin">点击跨域加载数据</button>
<ul id="box"></ul>
<script>
//对象获取
var byId = (id) => document.getElementById(id);
var btn = byId(‘btn‘);
var btnOrigin = byId(‘btn-origin‘);
var box = byId(‘box‘);
//ajax函数
function getData(callback, cors) {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = () => {
        if (xhr.readyState === 4) {
            callback(JSON.parse(xhr.responseText), xhr);
        } else {
            console.log(xhr.status, xhr.statusText, xhr);
        }
    }
    xhr.open(‘get‘, `http://127.0.0.1:3000/${cors}`); //不同按钮传递不同的参数进来
    xhr.send(null);
}
//直接访问 按钮事件绑定
btn.addEventListener(‘click‘, () => {
    getData((response) => {
    box.innerHTML = `<li>${response.result.data}</li>`;
}, ‘‘); //传递的cors参数为空
});
//跨域访问 按钮事件绑定
btnOrigin.addEventListener(‘click‘, () => {
getData((response) => {
box.innerHTML = `<li>${response.result.data}</li>`;
}, ‘?cors=1‘); //传递了cors参数
});
</script>
</body>

服务器B服务端代码

const Koa = require(‘koa‘)
const bodyParser = require(‘koa-bodyparser‘)
const app = new Koa()
const util = require(‘./util‘)
// bodyParser 插件,处理 post 提交过来的数据
app.use(bodyParser())
app.use(async ctx => {
const url = ctx.url
util.log(`访问地址:${url};请求方法:${ctx.method}`)
const origin = ctx.headers.origin //获取域名
if (origin && ctx.query.cors) {
ctx.set(‘Access-Control-Allow-Origin‘, origin) //满足约定条件,设置响应头
}
ctx.body = util.parse({
data: ‘hello cors‘
}, ctx.method)
})
app.listen(3000, () => {
util.log(‘服务启动,打开 http://127.0.0.1:3000/‘)
})

结果演示

1.当直接点击获取数据

响应头中无授权访问字段

2.当点击跨域访问时

服务器B返回响应头中带了允许服务器A访问的授权字段

原文地址:http://blog.51cto.com/13951200/2349267

时间: 2024-10-17 08:53:42

ajax跨域之CORS的相关文章

WCF SOA --- AJAX 跨域请求处理 CORS for WCF

一.问题        跨域请求无法处理的问题,由于为了阻止恶意的网站通过JS脚本来窃取正常网站受保护的资源.所由所有的浏览器的默认策略是阻止XmlHttpRequest的跨域的异步请求. 但是对于一个 复合型的应用集合来说,可能需要使用不同的域来部署我们的应用.对于这种正常的需求,我们的服务与应用就需要能够支持指定信认域的跨域的异步请法.       通常来说,我们有三种替代方案       1, 使用JSONP,             JSONP(JSON with Padding), 但

Ajax 跨域 异步 CORS

HTTP access control (CORS) 核心在于使用定制(添加新的header)HTTP header让浏览器和服务器有更多的相互了解,从而决定一个请求或者响应成功还是失败 对于一个简单的请求,没有定制header并且body是text/plain的话,该请求发送的时候会带上一个header叫origin,包含了发送请求的(prototype,domin,和port),服务器就可以根据这个来决定是否响应: Origin: http://www.haha.com 当服务器响应的时候,

Web Api 2(Cors)Ajax跨域访问

支持Ajax跨域访问ASP.NET Web Api 2(Cors)的简单示例教程演示 随着深入使用ASP.NET Web Api,我们可能会在项目中考虑将前端的业务分得更细.比如前端项目使用Angularjs的框架来做UI,而数据则由另一个Web Api 的网站项目来支撑.注意,这里是两个Web网站项目了,前端项目主要负责界面的呈现和一些前端的相应业务逻辑处理,而Web Api则负责提供数据. 这样问题就来了,如果前端通过ajax访问Web Api项目话,就涉及到跨域了.我们知道,如果直接访问,

AJAX POST&amp;跨域 解决方案 - CORS

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

JSP ajax跨域问题 怎么处理 原因:CORS 头缺少 &#39;Access-Control-Allow-Origin&#39;)。 ajax http 415

/** * Project Name:cm2mManage * File Name:CrossSiteFilter.java * Package Name:com.yoxnet.serverframework.base * Date:2016年4月27日下午4:52:51 * Copyright (c) 2016, [email protected] All Rights Reserved. * */ package com.zhl.sms.filter; import java.io.IOEx

AJAX跨域调用相关知识-CORS和JSONP

1.什么是跨域 跨域问题产生的原因,是由于浏览器的安全机制,JS只能访问与所在页面同一个域(相同协议.域名.端口)的内容. 但是我们项目开发过程中,经常会遇到在一个页面的JS代码中,需要通过AJAX去访问另一个服务器并返回数据,这时候就会受到浏览器跨域的安全限制了. 这里要注意,如果只是通过AJAX向另一个服务器发送请求而不要求数据返回,是不受跨域限制的.浏览器只是限制不能访问另一个域的数据,即不能访问返回的数据,并不限制发送请求. 我们接下来就为大家讲解最常见的跨域AJAX调用的解决方案,首先

JAX-RS开发(四):ajax跨域访问REST服务时的cors解决方案

上一篇博客我们通过JSONP解决AJAX跨域问题,本文将通过CORS来解决跨域问题.CORS是HTML5新推出的,需要较高版本的浏览器才能支持.我用的IE11和Chrome41,都是支持CORS规范的.cors可以参考下面几篇文章: cors规范 http://www.w3.org/TR/cors/ cors浏览器兼容性 http://caniuse.com/#search=cors tomcat7的cors解决方案 http://tomcat.apache.org/tomcat-7.0-doc

WeX5 - AJAX跨域调用相关知识-CORS和JSONP

http://docs.wex5.com/ajax-cross-domain/ 1.什么是跨域 跨域问题产生的原因,是由于浏览器的安全机制,JS只能访问与所在页面同一个域(相同协议.域名.端口)的内容. 但是我们项目开发过程中,经常会遇到在一个页面的JS代码中,需要通过AJAX去访问另一个服务器并返回数据,这时候就会受到浏览器跨域的安全限制了. 这里要注意,如果只是通过AJAX向另一个服务器发送请求而不要求数据返回,是不受跨域限制的.浏览器只是限制不能访问另一个域的数据,即不能访问返回的数据,并

(转) AJAX POST&amp;跨域 解决方案 - CORS

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