AngularJS为一个跨源资源执行一个OPTIONS HTTP请求
我正在尝试设置AngularJS与交付我的模板文件的资产主机位于不同域的跨源资源进行通信,因此angular度执行的XHR请求必须跨域。 我已经添加了适当的CORS头到我的服务器的HTTP请求,使其工作,但它似乎并没有工作。 问题是,当我检查我的浏览器(铬)HTTP请求发送到资产文件的请求是一个OPTIONS请求(它应该是一个GET请求)。
我不确定这是否是AngularJS中的错误,或者是否需要configuration。 从我所了解的XHR包装器不能做一个OPTIONS HTTP请求,所以它看起来像浏览器试图找出是否“允许”下载资产之前执行GET请求。 如果是这种情况,那么是否需要使用资产主机设置CORS头(Access-Control-Allow-Origin: http : //asset.host .. )?
OPTIONS请求绝不是AngularJS错误,这就是跨源资源共享标准要求浏览器行为的原因。 请参阅此文档: https : //developer.mozilla.org/en-US/docs/HTTP_access_control ,在“概述”部分中的位置:
“跨源资源共享”标准的工作原理是添加新的HTTP标头,允许服务器使用Web浏览器描述允许读取该信息的原始集合。 此外,对于可能对用户数据造成副作用的HTTP请求方法(特别是对于GET以外的HTTP方法,或对于某些MIMEtypes的POST使用)。 该规范要求浏览器“预检”请求,使用HTTP OPTIONS请求头从服务器请求支持的方法,然后在从服务器“批准”时,用实际的HTTP请求方法发送实际的请求。 服务器还可以通知客户端“凭证”(包括Cookie和HTTPauthentication数据)是否应该与请求一起发送。
提供适用于所有WWW服务器的通用解决scheme是非常困难的,因为安装程序将根据您打算支持的服务器本身和HTTP动词而有所不同。 我会鼓励你find这篇精彩的文章( http://www.html5rocks.com/en/tutorials/cors/ ),其中有更多关于需要由服务器发送的确切标题的详细信息。
对于Angular 1.2.0rc1 +,你需要添加一个resourceUrlWhitelist。
1.2:发行版他们增加了一个escapeForRegexp函数,所以你不用再转义string了。 你可以直接添加url
'http://sub*.assets.example.com/**'
确保为子文件夹添加**。 这是一个1.2的工作jsbin: http ://jsbin.com/olavok/145/edit
1.2.0rc:如果你仍然在一个RC版本,Angular 1.2.0rc1的解决scheme如下所示:
.config(['$sceDelegateProvider', function($sceDelegateProvider) { $sceDelegateProvider.resourceUrlWhitelist(['self', /^https?:\/\/(cdn\.)?yourdomain.com/]); }])
这里是一个jsbin的例子,它适用于1.2.0rc1: http ://jsbin.com/olavok/144/edit
Pre 1.2:对于旧版本(参考http://better-inter.net/enabling-cors-in-angular-js/ ),您需要将以下两行添加到您的configuration中:
$httpProvider.defaults.useXDomain = true; delete $httpProvider.defaults.headers.common['X-Requested-With'];
这里有一个jsbin的例子,它适用于1.2以前的版本: http ://jsbin.com/olavok/11/edit
注意:不确定它适用于最新版本的Angular。
原版的:
也可以覆盖OPTIONS请求(仅在Chrome中进行testing):
app.config(['$httpProvider', function ($httpProvider) { //Reset headers to avoid OPTIONS request (aka preflight) $httpProvider.defaults.headers.common = {}; $httpProvider.defaults.headers.post = {}; $httpProvider.defaults.headers.put = {}; $httpProvider.defaults.headers.patch = {}; }]);
您的服务必须使用以下标题回答OPTIONS
请求:
Access-Control-Allow-Origin: [the same origin from the request] Access-Control-Allow-Methods: GET, POST, PUT Access-Control-Allow-Headers: [the same ACCESS-CONTROL-REQUEST-HEADERS from request]
这是一个很好的文档: http : //www.html5rocks.com/en/tutorials/cors/#toc-adding-cors-support-to-the-server
同一份文件说
与上面讨论的简单请求不同,“preflighted”请求首先向另一个域上的资源发送HTTP OPTIONS请求头,以确定实际的请求是否安全发送。 跨站点请求是这样预先考虑的,因为它们可能会影响用户数据。 特别是,如果出现以下情况,则会请求一个请求:
它使用GET或POST以外的方法。 另外,如果使用POST来发送具有除application / x-www-form-urlencoded,multipart / form-data或text / plain之外的Content-Type的请求数据,例如,如果POST请求将XML有效载荷发送到服务器使用application / xml或text / xml,那么请求是预冲的。
它在请求中设置自定义标题(例如,请求使用X-PINGOTHER等标题)
当原始请求是Get with without custom headers时,浏览器不应该进行Options请求。 问题是它生成一个头X-Requested-With强制Options请求。 有关如何删除此标题,请参阅https://github.com/angular/angular.js/pull/1454
这解决了我的问题:
$http.defaults.headers.post["Content-Type"] = "text/plain";
如果你正在使用nodeJS服务器,你可以使用这个库,它工作正常我https://github.com/expressjs/cors
var express = require('express') , cors = require('cors') , app = express(); app.use(cors());
之后你可以做一个npm update
。
这是我在ASP.NET上解决这个问题的方式
-
首先,你应该添加nuget包Microsoft.AspNet.WebApi.Cors
-
然后修改文件App_Start \ WebApiConfig.cs
public static class WebApiConfig { public static void Register(HttpConfiguration config) { config.EnableCors(); ... } }
-
在你的控制器类中添加这个属性
[EnableCors(origins: "*", headers: "*", methods: "*")] public class MyController : ApiController { [AcceptVerbs("POST")] public IHttpActionResult Post([FromBody]YourDataType data) { ... return Ok(result); } }
-
我能够通过这种方式发送json到行动
$http({ method: 'POST', data: JSON.stringify(data), url: 'actionurl', headers: { 'Content-Type': 'application/json; charset=UTF-8' } }).then(...)
参考: 在ASP.NET Web API中启用跨域请求2
不知何故,我通过改变来修复它
Access-Control-Allow-Headers“Origin,X-Requested-With,Content-Type,Accept,Authorization”
至
Access-Control-Allow-Headers“Origin,Content-Type,Accept,Authorization”
在pkozlowski的评论完美描述。 我有AngularJS 1.2.6和ASP.NET Web Api的工作解决scheme,但是当我将AngularJS升级到1.3.3时,请求失败。
-
Web Api服务器的解决scheme是在configuration方法开始时添加对OPTIONS请求的处理( 本博文中有更多信息):
app.Use(async (context, next) => { IOwinRequest req = context.Request; IOwinResponse res = context.Response; if (req.Path.StartsWithSegments(new PathString("/Token"))) { var origin = req.Headers.Get("Origin"); if (!string.IsNullOrEmpty(origin)) { res.Headers.Set("Access-Control-Allow-Origin", origin); } if (req.Method == "OPTIONS") { res.StatusCode = 200; res.Headers.AppendCommaSeparatedValues("Access-Control-Allow-Methods", "GET", "POST"); res.Headers.AppendCommaSeparatedValues("Access-Control-Allow-Headers", "authorization", "content-type"); return; } } await next(); });
如果您正在使用Jersey for REST API,则可以执行以下操作
你不必改变你的web服务实现。
我将解释泽西2.x
1)首先添加一个ResponseFilter,如下所示
import java.io.IOException; import javax.ws.rs.container.ContainerRequestContext; import javax.ws.rs.container.ContainerResponseContext; import javax.ws.rs.container.ContainerResponseFilter; public class CorsResponseFilter implements ContainerResponseFilter { @Override public void filter(ContainerRequestContext requestContext, ContainerResponseContext responseContext) throws IOException { responseContext.getHeaders().add("Access-Control-Allow-Origin","*"); responseContext.getHeaders().add("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT"); } }
2)然后在web.xml中,在运动衫的servlet声明中添加下面的内容
<init-param> <param-name>jersey.config.server.provider.classnames</param-name> <param-value>YOUR PACKAGE.CorsResponseFilter</param-value> </init-param>
我放弃了试图解决这个问题。
我的IIS web.config中有相关的“ Access-Control-Allow-Methods
”,我尝试添加configuration设置到我的Angular的代码,但烧几个小时后,试图让Chrome调用跨域JSON Web服务,我悲惨地放弃了。
最后,我添加了一个愚蠢的ASP.Net处理程序网页,得到这个调用我的JSON Web服务,并返回结果。 它在2分钟内启动并运行。
这是我使用的代码:
public class LoadJSONData : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; string URL = "......"; using (var client = new HttpClient()) { // New code: client.BaseAddress = new Uri(URL); client.DefaultRequestHeaders.Accept.Clear(); client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json")); client.DefaultRequestHeaders.Add("Authorization", "Basic AUTHORIZATION_STRING"); HttpResponseMessage response = client.GetAsync(URL).Result; if (response.IsSuccessStatusCode) { var content = response.Content.ReadAsStringAsync().Result; context.Response.Write("Success: " + content); } else { context.Response.Write(response.StatusCode + " : Message - " + response.ReasonPhrase); } } } public bool IsReusable { get { return false; } } }
而在我的angular控制器…
$http.get("/Handlers/LoadJSONData.ashx") .success(function (data) { .... });
我确信有这样一个更简单/更通用的方法,但是人生太短暂了。
这对我有用,我现在可以继续做正常的工作!