Estoy haciendo una llamada axios para obtener los artículos del blog, sin embargo, me enfrento a un problema de CORS. He probado de todo y no entiendo el problema. Aquí está mi código:
axios({ method: "POST", url: process.env.REACT_APP_API_URL + '/pages/articles', headers: { 'Content-Type': 'application/json;charset=UTF-8', "Access-Control-Allow-Origin": "*", "Accept": "application/json" }, data: { country: localStorage.getItem("locale") } }).then(result => { setPosts(result.data.json.articles); });En mi /config/bootstrap.php
header('Access-Control-Allow-Origin: *'); header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization'); header("Access-Control-Allow-Credentials: true"); header('Content-Type: application/json'); $method = $_SERVER['REQUEST_METHOD']; if ($method == "OPTIONS") { header('Access-Control-Allow-Origin: *'); header("Access-Control-Allow-Headers: X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method,Access-Control-Request-Headers, Authorization"); header("HTTP/1.1 200 OK"); die(); }El problema en la consola es:
Access to XMLHttpRequest at 'https://api.mysite.fr/pages/articles' from origin 'https://mysite.fr' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.Aplique la validación de CORS en el servidor; debe ser del lado del servidor, no del front-end para el ejemplo: La solicitud en JavaScript Esto le muestra cómo realizar una solicitud en JavaScript que está permitida por esta política.
var http_request; http_request = new XMLHTTPRequest(); http_request.onreadystatechange = function () { /* .. */ }; http_request.open("POST", "process.env.REACT_APP_API_URL + '/pages/articles'"); http_request.withCredentials = true; http_request.setRequestHeader("Content-Type", "application/json"); http_request.send({ 'request': "authentication token" });Estamos enviando una solicitud POST que contiene JSON e incluiremos nuestras cookies. Produce una solicitud con estos encabezados:
Origin: https://mysite.fr Access-Control-Request-Method: POST Access-Control-Request-Headers: Content-TypePara proyecto PHP
// Allow from any origin if (isset($_SERVER['HTTP_ORIGIN'])) { // Decide if the origin in $_SERVER['HTTP_ORIGIN'] is one // you want to allow, and if so: header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}"); header('Access-Control-Allow-Credentials: true'); header('Access-Control-Max-Age: 86400'); // cache for 1 day } // Access-Control headers are received during OPTIONS requests if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') { if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD'])) // may also be using PUT, PATCH, HEAD etc header("Access-Control-Allow-Methods: GET, POST, OPTIONS"); if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS'])) header("Access-Control-Allow-Headers: {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}"); exit(0); }