0

EDIT: a lenghty discussion in the comments lead to the insight that the external APi has no CORS implementation, thus the only two options would be: turn off cors (which is no option) or make a proxy implementation of the external API, as the results can be retrieved easily by curl.

I still stumble on the CORS issue: I am developing locally a laravel 10 app, which contains a vue component, which calls an external API on https://opendata.congreso.cl/...

So I browse to http://localhost:63350/dashboard where the vue component is embedded.

The external API is open, via browser I get the JSON result, but with the laravel app I get a CORS error (CORS Header missing)

My vue call is via fetch

const res = await fetch("https://opendata.congreso.cl/..);

and the config/cors.php is configured as follows:

return [

    'paths' => ['dashboard/*','dashboard','api/*', 'sanctum/csrf-cookie'],

    'allowed_methods' => ['*'],

    'allowed_origins' => ['*','https://opendata.congreso.cl/*'],

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['*'],

    'exposed_headers' => ['*'],

    'max_age' => 0,

    'supports_credentials' => false,

];

the error is: Cross-Origin request blocked: The same source rule forbids the reading of external resources on ... the same source rule prohibits the reading of the external resource on ... (CORS-Header missing) status 200

strange thing is on the browser console I see the result, but it states that for scripts the CORS Missing Allow Origin

what do I miss? Where to look? I admit that I am still lost with these cors issues and I'm new to laravel 10

image of console output of the CORS Call

Canelo Digital
  • 340
  • 2
  • 10
  • You've misunderstood how CORS works. It can only be enabled on the server-side of the request and that server is https://opendata.congreso.cl/, something you do not have any control over. Luckily, you can use your Laravel application as a proxy – Phil May 23 '23 at 23:45
  • In this case it was different... I just rechecked looking in detail at the XHR response in the console, and I was wondering that it had the result in the answer, but something else was blocking it. IN THIS CASE THE SERVER HAD NO CORS POLICY Implemented, so the client was blocking because of the missing cors header in the answer... so the fetch call had to be done with mode: 'no-cors' fetch("https://opendata.congreso.cl/...",{ 'mode': 'no-cors'}); – Canelo Digital May 23 '23 at 23:57
  • [mode: 'no-cors' is almost **never** the answer](https://stackoverflow.com/q/43262121/283366) – Phil May 23 '23 at 23:59
  • may be but then: why is the browser allowed to get the result, but not the script? https://opendata.congreso.cl/camaradiputados/WServices/WSDiputado.asmx/retornarDiputados? – Canelo Digital May 24 '23 at 00:04
  • Please read the accepted answer in the linked duplicate. Directly opening a URL in your browser does not count as a cross-origin request – Phil May 24 '23 at 00:07
  • yep, I did in detail. it's public APis about congresmen, they offer GET, POST and SOAP APis and state explicitly: in a format [...] free of obstacles or restrictions such as copyrights, licenses or other control mechanisms. This data can be freely used by citizens to generate their own applications[...] So i do not understand why cors should be a serverside issue. I mean I can get the xml via browser and feed a database, but nevertheless. That's why I'm struggling, it gives status 200 OK, but with referer-policy: "strict-origin-when-cross-origin" perhaps I need to deploy to a server with URL? – Canelo Digital May 24 '23 at 00:39
  • If they don't support CORS, they don't support CORS. You could always try and get in touch with the maintainers and ask them to support it. Otherwise, your only real option is to stand up your own server-side application (like Laravel) to act as a proxy between your frontend and any upstream APIs. This is also mentioned in the duplicate's accepted answer – Phil May 24 '23 at 00:41
  • 1
    that's why I wanted to make the fetch with 'no-cors'... but I see the chain of events that leads to... will read it thoroughly... the issue is really they don't have CORS enabled, I checked via curl call. that would be another way to get the data into my vue component, also creating php apis as proxy... got that now! Have a nice evening. THX, learnt something! thanks for that link – Canelo Digital May 24 '23 at 00:56

0 Answers0