angularjs $resource save method with cross origin with error 415

Question

im using $resource with method save to send information to raspberry with vNext API (.net core).

When i use the method query or get of $resource it work, but when i use save the server returns 415 Unsupported Media Type.

this is my resource request, see im setting 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"})

Look what Angular JS do when it do the request:

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

  Request Method:OPTIONS

  Accept:/

  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

  Connection:keep-alive

  Host:192.168.100.100:5000

  Origin:http://127.0.0.1:8080

  Pragma:no-cache

  Referer:http://127.0.0.1:8080/

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

  AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.76 Mobile Safari/537.36

When it send to server, AngularJS send with reqeust method "OPTIONS", the server not receive the request.

XMLHttpRequest cannot load http://192.168.100.100:5000/x/lorem. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:8080' is therefore not allowed access. The response had HTTP status code 415.

How can i resolve it ? Thanks all :)

Answer 1

@lvanegmond from GITHUB help me in this post:

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

with this solution:

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

From the docs: https://learn.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).

Answer 2

Here are a few ways to solve this problem:

Best: CORS header (requires server changes)

CORS (Cross-Origin Resource Sharing) is a way for the server to say “I will accept your request, even though you came from a different origin.” This requires cooperation from the server – so if you can’t modify the server (e.g. if you’re using an external API), this approach won’t work.

Modify the server to add the header Access-Control-Allow-Origin: * to enable cross-origin requests from anywhere (or specify a domain instead of *). This should solve your problem.

2nd choice: Proxy Server

If you can’t modify the server, you can run your own proxy. And this proxy can return the Access-Control-Allow-Origin header if it’s not at the Same Origin as your page.

Instead of sending API requests to some remote server, you’ll make requests to your proxy, which will forward them to the remote server. Here are a few proxy options.

3rd choice: JSONP (requires server support)

If CORS and the proxy server don’t work for you, JSONP may help. You essentially make a GET request with a callback parameter:

(get) http://api.example.com/endpoint?callback=foo The server will wrap the JSON reply in a function call to your callback, where you can handle it:

foo({"your": "json", here: true}) There are some downsides, notably that JSONP only supports GET requests and that you still need a cooperative server.