Certo, tenho um aplicação que esta sendo desenvolvida em php(laravel), essa aplicação recebe solicitações que são enviadas via ajax usando jquery, só que na parte das funções jquery preciso fazer uma chamada para uma API externa. Então tenho chamadas ajax para a API da minha aplicação e para API de terceiros. Mas de um tempo para cá venho tendo um problema com o CORS, pelo que eu entendi os navegadores não permitem que scripts façam chamadas para api’s que estejam em domínios diferentes.
Ou seja se eu tenho uma chamada ajax para “www.carros.com/api” e para www.motos.com/api vou ter o problema:
jquery.js:10109 Access to XMLHttpRequest at 'www.carros.com/api' from origin 'http://localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Meu navegador também informa:
Ensure CORS response header values are valid
A cross-origin resource sharing (CORS) request was blocked because of invalid or missing response headers of the request or the associated preflight request.
To fix this issue, ensure the response to the CORS request and/or the associated preflight request are not missing headers and use valid header values.
Note that if an opaque response is sufficient, the request's mode can be set to no-cors to fetch the resource with CORS disabled; that way CORS headers are not required but the response content is inaccessible (opaque).
Não entendi muito bem esse erro, mas o problema parece estar em fazer chamadas para domínios diferentes do meu. Tentei resolver usando “jsonp” mas estou utilizando um plugin chamado select2, e ele não aceitou muito bem essa solução. O que eu posso fazer ? em uma das apis eu tenho acesso, a outra não por ser de terceiros, então não consigo mudar nada.
Lembrando, não é sempre que esse problema acontece, esse é o cabeçalho da resposta quando da certo
Cabeçalhos de resposta
access-control-allow-headers: Origin, X-Requested-With, Content-Type, Accept, Authorization
access-control-allow-methods: POST, PUT, DELETE, GET, OPTIONS
access-control-allow-origin: *
access-control-expose-headers: link, per-page, total
access-control-max-age: 7200
access-control-request-method: *
alternate-protocol: 443:npn-spdy/2
cache-control: max-age=30, public, must-revalidate, s-maxage=30
cf-cache-status: MISS
cf-ray: 6a14c8acbaa851cc-GRU
content-encoding: br
content-type: application/json; charset=utf-8
date: Wed, 20 Oct 2021 19:51:58 GMT
etag: W/"ee1f616da812a567608ca82f74e80c7c"
expect-ct: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"
server: cloudflare
vary: Accept-Encoding, Origin
x-request-id: 722203a3-f199-491a-9e5f-638d47539e99
x-runtime: 0.009802
Cabeçalho de solicitação
:authority: api.nomeomitido.com
:method: GET
:path: /api/v3/...etc
:scheme: https
accept: */*
accept-encoding: gzip, deflate, br
accept-language: pt-BR,pt;q=0.9,en-US;q=0.8,en;q=0.7
origin: http://localhost
referer: http://localhost/
sec-ch-ua: "Chromium";v="94", "Google Chrome";v="94", ";Not A Brand";v="99"
sec-ch-ua-mobile: ?1
sec-ch-ua-platform: "Android"
sec-fetch-dest: empty
sec-fetch-mode: cors
sec-fetch-site: cross-site
user-agent: Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.81 Mobile Safari/537.36
Esse quando dá erro:
Cabeçalhos de resposta
cache-control: private, max-age=0, no-store, no-cache, must-revalidate, post-check=0, pre-check=0
cf-ray: 6a14c8c1fd3951cc-GRU
content-type: text/html; charset=UTF-8
date: Wed, 20 Oct 2021 19:53:01 GMT
expires: Thu, 01 Jan 1970 00:00:01 GMT
referrer-policy: same-origin
server: cloudflare
set-cookie: cf_use_ob=0; path=/; expires=Wed, 20-Oct-21 19:53:31 GMT
x-frame-options: SAMEORIGIN
Cabeçalho de solicitação
:authority: api.nomeomitido.com
:method: GET
:path: /api/v3/...etc
:scheme: https
accept: */*
accept-encoding: gzip, deflate, br
accept-language: pt-BR,pt;q=0.9,en-US;q=0.8,en;q=0.7
origin: http://localhost
referer: http://localhost/
sec-ch-ua: "Chromium";v="94", "Google Chrome";v="94", ";Not A Brand";v="99"
sec-ch-ua-mobile: ?1
sec-ch-ua-platform: "Android"
sec-fetch-dest: empty
sec-fetch-mode: cors
sec-fetch-site: cross-site
user-agent: Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.81 Mobile Safari/537.36
Exemplo de requisição ajax
$.ajax({
type: "GET",
url: 'url',
async: false,
crossDomain: true,
cache: false
}).done(function (data2) {
}).fail(function (request, status, error) {
});
}
com select2
$('#select').select2({
width: '100%',
allowClear: true,
ajax: {
type: "GET",
url: 'url',
async: false,
dataType: "json",
crossDomain: true,
cache: false,
minimumInputLength: 1,
delay: 500,
data: function (params) {
var query = {
term: params.term
order: 'desc',
per_page: 250,
sparkline: false,
page: 1
}
return query;
},
processResults: function (data) {
return {
results: $.map(data, function (obj) {
return { id: obj.id, text: obj.name, image: obj.image }
})
};
},
error: function (a, b, c) {
}
},