I'm using vue3 with codeigniter4 .I am getting a CORS issue with fetch When sending a custom header even I set what should be set for CORS in server side method (Without using the framework filters ,Just pure php)
my js code is :
GetMyOrders() {
fetch(this.AppMainData.ApiUrl+'orders/get', {
method: 'GET',
headers:{
'Role': 'some role',
}
}).then(response => response.json())
.then(data => {
console.log(data);
this.MyOrders = data.result;
this.explode;
return;
})
}
And my php code in codeigniter controller (Not resource) is :
public function GetMyOrders(){
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Role ,Content-Type,Origin');
header('Access-Control-Allow-Credentials:true');
$db=\Config\Database::connect();
$data['result']=$db->query("Some SQL Query")->getResult();
return json_encode($data);
}
The fetch is successful when not fetching with header , but when i add my custom header the response is blocked by CORS policy as bellow:
"Access to fetch at 'http://localhost/MyApp/public/api/orders/get' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled."
Any idea please (Without using External Solutions) !!!
It's solved .As the Bros mentioned in replies (A preflight request issue)
Just adding this checking Request Code in (Routes.php) And The problem is solved
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']) &&
$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD'] == 'GET') {
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers:Role,Origin , Content-Type');
}
exit;
}
Thank U Guys
Related
I try to fetch a route from candriam-app.nanosite.tech to candriam.nanosite.tech, I have tried several methods to allow headers but I still have this error
Access to fetch at 'https://xxxA/wp-json/nf-submissions/v1/form/1' from origin 'https://xxxB' has been blocked by CORS policy: Request header field nf-rest-key is not allowed by Access-Control-Allow-Headers in preflight response.
I want to create a headless Wordpress of the website xxxA. I can perform request on the WP Rest API without any problem from candriam-app.nanosite.tech, but I have issues with an endpoint created by this extension : https://github.com/haet/ninja-forms-submissions-rest-endpoint
I followed the documentation and my code to perform the request is like this :
export async function getApiContactForm(route, params = { method: 'get' }) {
const data = await fetch(route, {
method: params.method,
headers: {
'Content-Type': 'application/json',
'NF-REST-Key': 'xxxxxxxxxxx',
},
})
const body = data.json()
return body
}
The NF-Rest-Key is of course the same given by the module.
I have tried different methods on the server-side :
In functions.php, I tried this code :
header( 'Access-Control-Allow-Origin: * ' );
header( 'Access-Control-Allow-Methods: GET' );
header( 'Access-Control-Allow-Credentials: true' );
header( 'Access-Control-Allow-Headers: nf-rest-key' );
In .htaccess file of xxxxxA, I tried this code :
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
I aso tried :
Header set Access-Control-Allow-Origin *
Header set AMP-Access-Control-Allow-Source-Origin *
But I still get the error.
Is it possible that the plugin is bugged ? Do I have to specifically allow this plugin, this header (nf-rest-key) from the server ?
When I check the headers of the server (like here : https://securityheaders.com/) am I supposed to see that the website where my app is stored is authorised ?
I resolved my problem by adding this code to functions.php :
add_action('init', 'handle_preflight');
function handle_preflight()
{
$origin = get_http_origin();
if ($origin == 'http://localhost:8080' || $origin == 'https://xxxxxB') {
// You can set more specific domains if you need
header("Access-Control-Allow-Origin: " . $origin);
header("Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE");
header("Access-Control-Allow-Credentials: true");
header('Access-Control-Allow-Headers: NF-REST-Key, Content-Type');
if ('OPTIONS' == $_SERVER['REQUEST_METHOD']) {
status_header(200);
exit();
}
}
}
I want to GET JSON from the endpoint https://api.brawlstars.com/v1/brawlers.
(https://api.brawlstars.com/v1/brawlers?Authorization="Bearer%20[My API Key]")
Here's my Code:
let url = 'https://api.brawlstars.com/v1/brawlers'
fetch(url, {
method: "GET",
headers: {
"Authorization": "Bearer **USER'S API KEY GOES HERE**"
}
}).then((response) => {
let json = response.json();
console.log(json);
}).catch((err) => {
console.error(err)
});
This is the output (error):
Access to fetch at 'https://api.brawlstars.com/v1/brawlers' from origin 'http://127.0.0.1:8887' has been
blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If
an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS
disabled.
sketch.js:3 GET https://api.brawlstars.com/v1/brawlers net::ERR_FAILED
127.0.0.1/:1 Uncaught (in promise) TypeError: Failed to fetch
What am I missing?
In your header, you need to enable CORS like CBroe said :
headers.append('Access-Control-Allow-Origin', 'http://127.0.0.1:8887');
headers.append('Access-Control-Allow-Credentials', 'true');
Edit :
The server (that the POST request is sent to) needs to include the Access-Control-Allow-Headers header (etc) in its response. Putting them in your request from the client has no effect.
This is because it is up to the server to specify that it accepts cross-origin requests (and that it permits the Content-Type request header, and so on) – the client cannot decide for itself that a given server should allow CORS.
So I've been trying to pass data from my front-end to my back-end (however, I'm not very experienced within this area). The data comes through, however, if I try to insert the data into my MySQL-DB through PDO the browser gives me the following error:
Failed to load http://localhost:8888/post_recipe.php: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled."
JS
postToAPI = () => {
fetch(`http://localhost:8888/post_recipe.php`, {
method: 'POST',
headers: {
'Content-Type': 'text/html'
},
mode: 'cors',
body: JSON.stringify({
title: this.state.title,
description: this.state.description,
userID: this.props.userInfo.response.id,
name: this.props.userInfo.response.name,
stepByStep: (this.state.stepByStep),
recipeIngredients: (this.state.recipeIngredients),
profileImg: this.props.userInfo.response.picture.data.url
})
})
.then((response) => response.json())
.then((fetch) => {
console.log(fetch)
});
}
PHP
<?php
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Credentials: true');
header("Content-type: text/html; charset=utf-8");
header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');
$post = json_decode(file_get_contents('php://input'));
$array = json_decode(json_encode($post), True);
$pdo = new PDO(
"mysql:host=localhost:8889;dbname=veganify;charset=utf8",
"root",
"root"
);
$statement = $pdo->prepare(
"INSERT INTO posts (title, description, userID, name, stepByStep, recipeIngredients, profileImg)
VALUES (:title, :description, :userID, :name, :stepByStep, :recipeIngredients, :profileImg)"
);
$statement->execute(array(
":title" => $array["title"],
":description" => $array["description"],
":userID" => $array["userID"],
":name" => $array["name"],
":stepByStep" => $array["stepByStep"],
":recipeIngredients" => $array["recipeIngredients"],
":profileImg" => $array["profileImg"]
));
}
echo json_encode($array);
?>
So if I delete the MySQL-insertion, the data comes back to the front-end. I have been stuck here for a while now searching various forums for a solution. The error message says that the header is not present, however it is there, as you can see.
Any help would be much appreciated!
Cheers!
Good afternoon, this is because of the apache blocking requests from different sources ie if your backend is at http://yourdomain.com/client and your font-end is at localhost:3001 will cause a because they are of different (host) origins.
To solve:
Use the .htaccess file in your api / backend folder, for example, in my application my index.php is not in localhost / my-api / public directory then my .htaccess file in this directory directory localhost / my-api / public
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Origin: "*" (allow access from any origin)
Header set Access-Control-Allow-Origin: "http://motech-ui.example" (allow access from only "http://motech-ui.example" origin)
Access-Control-Allow-Origin: "http://motech-ui.example | http://other.domain" (allow access from two mentioned origins)
</IfModule>
Or config in apache.conf
Access-Control-Allow-Origin: "*" (allow access from any origin)
Access-Control-Allow-Origin: "http://motech-ui.example" (allow access from only "http://motech-ui.example" origin)
Access-Control-Allow-Origin: "http://motech-ui.example | http://other.domain" (allow access from two mentioned origins)
CORS in Javascript and PHP works like.
OPTIONS method request will be triggered from browser side.
Server side (PHP) should accept the OPTIONS request, by responding 'OK'.
Now a proper POST request will be triggered from browser side, which will go to your functionality location where your PHP code will gets executed.
if ($_SERVER["REQUEST_METHOD"] === "OPTIONS") {
//location where you can handle your request and respond ok
echo 'OK';
}
If you can not control the sever side, you can work around like me on
Client side only.
If you can control server side, you can use server side solution. I am not discus it here.
Only on client side, work around is
use dataType: 'jsonp',
async function get_ajax_data(){
var _reprojected_lat_lng = await $.ajax({
type: 'GET',
dataType: 'jsonp',
data: {},
url: _reprojection_url,
error: function (jqXHR, textStatus, errorThrown) {
console.log(jqXHR)
},
success: function (data) {
console.log(data);
// note: data is already json type, you just specify dataType: jsonp
return data;
}
});
} // function
I am making simple application with React that sends ajax requests to API made with Symfony. I am developing both the react app and symfony api. I am sending request from localhost:3000 to localhost:8000. Here is the ajax request that I am sending
addUser (data) {
console.log('made it')
let request = {
method: 'post',
url: 'http://127.0.0.1:8000/user/post',
data: JSON.stringify({'username': data}),
contentType: 'application/json'
}
$.ajax(request)
.done(data => this.addUserSuccess(data))
.fail(err => this.addUserFail(err))
}
and here is the Symmfony app that takes care of the request
/**
* Creates a new user entity.
*
* #Route("/post", name="user_new")
* #Method({"GET", "POST"})
*/
function newAction(Request $request ) {
echo $request;
$body = $request->getContent();
$body = json_decode($body,true);
$username = $body['username'];
$user = new User($username);
$em = $this->getDoctrine()->getManager();
$em->persist($user);
$em->flush();
return new JsonResponse($user,200,array('Access-Control-Allow-Origin'=> '*'));
}
I am so far in the beginning and as you can see I am creating new user without password, security or anything. I just want to make it work and be able to send request from the app to the api. Here is the result
XMLHttpRequest cannot load http://127.0.0.1:8000/user/post. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 405.
I have seen many questions like this one before and one of the answers was to return JsonResponse with the header and as you can see it does not work.
Here is one of the quenstions whose answer I followed - Origin is not allowed by Access-Control-Allow-Origin but unfortunately with no success.
Can you tell me how to fix it? Thank you in advance!
Here's what I'm doing for the same situation. In app/config/config_dev.yml, add a new service. Putting this in config_dev.yml means this will only affect requests through app_dev.php.
services:
app.cors_listener:
class: AppBundle\Security\CorsListener
tags:
- { name: kernel.event_listener, event: kernel.response, method: onKernelResponse }
And the contents of AppBundle/Security/CorsListener.php:
<?php
namespace AppBundle\Security;
use Symfony\Component\HttpKernel\Event\FilterResponseEvent;
// Based on http://stackoverflow.com/a/21720357
class CorsListener
{
public function onKernelResponse(FilterResponseEvent $event)
{
$responseHeaders = $event->getResponse()->headers;
$responseHeaders->set('Access-Control-Allow-Headers', 'origin, content-type, accept, credentials');
$responseHeaders->set('Access-Control-Allow-Origin', 'http://localhost:8080');
$responseHeaders->set('Access-Control-Allow-Credentials', 'true');
$responseHeaders->set('Access-Control-Allow-Methods', 'POST, GET, PUT, DELETE, PATCH, OPTIONS');
}
}
You need to set the correct headers on your PHP file.
header('Access-Control-Allow-Origin: *');
I am trying to send a json to a php script on a server and even though I have included header in php script to have CORS the console throws error
error message
XMLHttpRequest cannot load http://www.awesomegag.0fees.us/updata.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access. The response had HTTP status code 403.
my code :
php
<?php
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST');
header("Content-Type: application/json; charset=UTF-8");
if (isset($_SERVER['HTTP_ORIGIN'])) {
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']))
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);
}
echo"hello";
$postdata = file_get_contents("php://input");
$request = json_decode($postdata);
?>
My app.js
.controller('datactr', ['$scope','$http','ApiEndpoint',function($scope,$http,ApiEndpoint) {
$scope.submit=function(){
console.log("step1");
$http({
method:'POST',
url:'http://www.awesomegag.0fees.us/updata.php',
data:{
'name':$scope.name
}
}).success(function(data,status,header,config){
console.log("step2");
console.log(data);
})
});
I tried to make it work using proxy method by making path /api and proxyUrl to updata.php address in ionic.project and then replace url in http service to /api. I get a 500 internal server error.
Can anyone help ?
Update: I have moved to a different server where everything works fine.I guess it is some problem with the server but have no idea how to fix it.
Looks like that your server doesn't allow OPTIONS method.
Modern browser do "pre-flight" request for cross origin request to make sure that it is allowed to do so before sending GET/POST request.
Solution: Enable OPTIONS command. Example for Apache http://httpd.apache.org/docs/trunk/mod/mod_allowmethods.html