跨域CORS

一、跨域CORS是什么

当一个资源从与该资源本身所在的服务器的域或端口不同的域或不同的端口请求一个资源时,浏览器会发起一个跨域 HTTP 请求。出于安全考虑,浏览器会限制从脚本内发起的跨域HTTP请求或者拦截了服务器返回内容。例如,XMLHttpRequest 和 Fetch 遵循同源策略。因此,使用 XMLHttpRequest或 Fetch 的Web应用程序只能将HTTP请求发送到其自己的域;这种安全机制是为避免出现类似CSRF 跨站攻击等问题。

二、实现CORS

根据CORS的定义和W3C相关规范,明白了跨域的关键问题是在于服务端是否允许;而服务端是通过W3C所规定的相关CORS heades来实现的;相关headers如下:

Access-Control-Allow-Origin:*

该字段是必须的。它的值要么是请求时Origin字段的值,要么是一个*,表示接受任意域名的请求。

Access-Control-Allow-Methods: POST, GET, OPTIONS

该字段可选。表明服务器允许客户端使用 POST, GET 和 OPTIONS

Access-Control-Allow-Headers: X-PINGOTHER, Content-Type

该字段可选。表明服务器允许请求中携带字段 X-PINGOTHER 与 Content-Type。

Access-Control-Max-Age: 86400

表明该响应的有效时间为 86400 秒,也就是 24 小时。在有效时间内,浏览器无须为同一请求再次发起预检请求。

Access-Control-Allow-Credentials: true

该字段可选。它的值是一个布尔值,表示是否允许发送Cookie。

跨域相关规范可以照文档:https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

三、WCF restful实现CORS

1.

 

2.

 

3.在所要公开的服务类上面[CORS],例如:

四、js测试

    <script type="text/javascript">
        $(function () {
            $("button").click(function () {                var postData = JSON.stringify({ name: "ASDF.txt", md5Code: "F006096956B5062F8EFB72AF4DF59BC2"});

                console.log(postData);

                $.ajax({
                    url: "http://127.0.0.1:16060/FileService/GetInfo",
                    headers: {
                        imUserID: "e82287ac45c14040ba8ef34b9c2dac29",
                        accessToken: "U6wJgLoAdxVXUpx5R6AdZnFW/ytU+kgnVzaejZZoSdR31lNoRmDsQz42viOP7Jtm3iz8L2COA16r9rl5YUvZPhpHAAWxLNJBWWjHGKibHYejUuerO9qoxEkb6Yi+apPf60MzfmZ+SIgwhs6UBYOx2AbTkMdywYPCgKh8Q/mlVImUz0BU6WG4QCqgdqIefGi3"
                    },
                    contentType: "application/json; charset=utf-8",
                    type: "post",
                    dataType: "json",
                    data: postData,
                    success: function (data) {
                        $("#s").html(JSON.stringify(data));
                        console.log(data);
                    },
                    error: function (e) {
                        $("#e").html(e);
                        console.log(e);
                    }
                });
            });

        });    </script>

测试结果:

时间: 2024-08-13 10:55:43

跨域CORS的相关文章

zuul+security跨域Cors问题解决

zuul+security跨域Cors问题解决 简介 场景 在服务后台都会出现跨域cors问题,不过一般spring解决起来比较方便,在框架+框架的基础上,问题就显得特别明显了,各种冲突,不了解源码的运行原理,解决起来也是有心无力. 这里介绍的是zuul配置了跨域,在前端调用仍然会出现跨域的问题. 一般没有权限的接口加上cors配置就会通过跨域的问题.不过在服务间调用具有权限的功能,莫名的报跨域问题. post特殊请求 在解决问题时发现 post 请求也有点特殊,这里也需要处理一下. post请

转 Js 跨域CORS报错 Response for preflight has invalid HTTP status code 405

转自:http://www.cnblogs.com/SilenceTom/p/6697484.html 调用接口遇到Response for preflight has invalid HTTP status code 405这样的错误,是使用PUT方式提交请求接口.Content-Type设置为application/json,JS代码如下: $.ajax({ type: "PUT", url: "http://172.16.200.84:8977/Messages?ses

node跨域cors模块,nodejs+express跨域

使用express写的接口,只能在内部使用,如果想要外部的服务访问,就涉及到了跨域.但是又不想用jsonp,其实有一个node模块,可以轻松实现跨域 npm install cors --save 然后在app.js文件中 var cors = require('cors'); app.use(cors()); 注意,这个代码一定要,写在注册路由的前面.此模块也可以,当做路由中间件,指定某一个,或者某一部分路由,拥有跨域功能.

MVC跨域CORS扩展

CORS的原理: CORS定义一种跨域访问的机制,可以让AJAX实现跨域访问.CORS 允许一个域上的网络应用向另一个域提交跨域 AJAX 请求.实现此功能非常简单,只需由服务器发送一个响应标头即可.      context.HttpContext.Response.AppendHeader("Access-Control-Allow-Origin", origin); 针对ASP.NET MVC,cors跨域访问,只需要在web.config中添加如下的内容即可 <syste

AJAX 跨域 CORS 解决方案

本篇文章由:http://xinpure.com/solutions-for-cross-domain-ajax-cors/ 两种跨域方法 在 Javascript 中跨域访问是比较常见的事情 就像现在比较流行写单页应用,而单页应用在访问 API 的时候就会有跨域的问题 要解决跨域的问题,其实也并不复杂,有两种方案可以选择 Jsonp 跨域 Jsonp 的实现原理就是:创建一个回调函数,然后在远程服务上调用这个函数并且将 JSON 数据形式作为参数传递,完成回调. CORS(跨域资源共享) 跨源

跨域cors中如何传递cookie(前端为什么无法向后端传递cookie?)

没有跨域 后端server只要在回应头部'set-cookie',那么就会有cookie产生并保存在客户端client. 等到client再次向后端server发送请求时浏览器的机制就会自动携带cookie随着请求一并发送给后端. 跨域 浏览器默认情况下无法主动跨域向后端发送cookie, 如果你要发送cookie给server的话, 就需要将withCredentials设置为true了. ;但是,server并不是随便就能接受并返回新的cookie给你的. 在server端,还需要设置. A

Js 跨域CORS报错 Response for preflight has invalid HTTP status code 405

调用接口遇到Response for preflight has invalid HTTP status code 405这样的错误,是使用PUT方式提交请求接口.Content-Type设置为application/json,JS代码如下: $.ajax({ type: "PUT", url: "http://172.16.200.84:8977/Messages?sessionId=ee876bfbtest", data:data, beforeSend: fu

Web高级 Ajax和跨域CORS

Asynchronous JavaScript and XML 1. XMLHttpRequest 前端开发都知道,不多说. var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if (xhr.readyState !== 4) return; if (xhr.status >= 200 && xhr.status < 300) { console.log(JSON.parse(xhr.r

spring 设置跨域 CORS (Cross Origin Resources Share) 跨域

Spring提供了三种方式跨域 1.CorsFilter 过滤器 2.<mvc:cors> Bean 3.@CrossOrigin注解 以上三种方式本质都是用来配置CorsConfiguration 1.CorsFilter 过滤器 首先创建一个自己的过滤器 这里我创建一个类,名字为MyCorsFilter import org.springframework.web.cors.CorsConfiguration; import org.springframework.web.cors.Url