angularjs $resource 保存方法跨源错误 415

Question

我使用 $resource 和方法 save 通过 vNext API (.net core) 将信息发送到树莓派。

当我使用 $resource 的 query 或 get 方法时它工作，但是当我使用保存服务器时 returns 415 不支持的媒体类型.

这是我的资源请求，看我设置Content-type header:

var req = $resource(raspUrl + resource, data || {}, 
          {
              save: {
                      method: 'POST',
                      headers: { 'Content-Type': 'application/json' }
              },
              post: {
                      method: 'POST',
                      headers: { 'Content-Type': 'application/json' }
              }
           });

 req.save({name: 'Argate', city: "Campinas - São Paulo"})

看看 Angular JS 在执行请求时做了什么：

请求 URL:http://192.168.100.100:5000/api/caixa?dataAbertura=2016-01-12&nuvem=0&sangria=0&sequencia=1&usuarioId=6

请求Method:OPTIONS

接受：/

Accept-Encoding:gzip, deflate, sdch

Accept-Language:en-US,en;q=0.8,pt;q=0.6,fr;q=0.4,af;q=0.2,it;q=0.2

Access-Control-Request-Headers:content-type

Access-Control-Request-Method:POST

Cache-Control:no-cache

连接：keep-alive

主机：192.168.100.100:5000

来源：http://127.0.0.1:8080

编译指示：no-cache

推荐人：http://127.0.0.1:8080/

User-Agent:Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N)

AppleWebKit/537.36（KHTML，如 Gecko）Chrome/46.0.2490.76 移动 Safari/537.36

发送到服务器时，AngularJS用reqeust方法发送"OPTIONS"，服务器没有收到请求。

XMLHttpRequest 无法加载 http://192.168.100.100:5000/x/lorem。对预检请求的响应未通过访问控制检查：请求的资源上不存在 'Access-Control-Allow-Origin' header。因此不允许访问来源“http://127.0.0.1:8080”。响应具有 HTTP 状态代码 415。

我该如何解决？谢谢大家:)

Answer 1

这里有几种方法可以解决这个问题：

最佳：CORS header（需要更改服务器）

CORS（Cross-Origin 资源共享）是服务器说“我会接受你的请求，即使你来自不同的来源”的一种方式。这需要服务器的配合——所以如果你不能修改服务器（例如，如果你使用的是外部API），这种方法将行不通。

修改服务器以添加 header Access-Control-Allow-Origin: * 以启用来自任何地方的 cross-origin 请求（或指定域而不是 *）。这应该可以解决您的问题。

第二选择：代理服务器

如果你不能修改服务器，你可以运行自己的代理。如果此代理与您的页面不在同一来源，则它可以 return Access-Control-Allow-Origin header。

您无需向某个远程服务器发送 API 请求，而是向您的代理发出请求，代理会将请求转发到远程服务器。这里有一些代理选项。

第三选择：JSONP（需要服务器支持）

如果 CORS 和代理服务器不适合您，JSONP 可能会有所帮助。您实际上使用回调参数发出 GET 请求：

（得到）http://api.example.com/endpoint?callback=foo 服务器会将 JSON 回复包装在对回调的函数调用中，您可以在其中处理它：

foo({"your": "json", 这里: true}) 有一些缺点，特别是 JSONP 仅支持 GET 请求，您仍然需要一个合作服务器。

Answer 2

来自 GITHUB 的@lvanegmond 帮助我 post:

https://github.com/aspnet/Mvc/issues/5591#issuecomment-264961434

使用此解决方案：

Try putting app.UseCors("CorsPolicy"); before app.UseMvc();

From the docs: https://docs.microsoft.com/en-us/aspnet/core/security/cors#enabling-cors-with-middleware

To enable CORS for your entire application add the CORS middleware to your request pipeline using the UseCors extension method. Note that the CORS middleware must precede any defined endpoints in your app that you want to support cross-origin requests (ex. before any call to UseMvc).

angularjs $resource 保存方法跨源错误 415

angularjs $resource save method with cross origin with error 415

angularjs

angular-resource

raspberry-pi3

.net-core-rc2

asp.net-core-webapi