It is about a javascript pixel to follow up who does what in a sales funnel on the web.
I have a javascript script on my customer thrivecart domain (e.g. https://ownspace.thrivecart.com)
I want to make a request to another domain (e.g. https://emails.mycustomer.com) from which the javascript script is from.
Here is the main part of the javacsript code on https://ownspace.thrivecart.com :
$(document).ready(function () {
console.log("loading pixel");
$.ajax({
url: 'https://emails.mycustomer.com/server_side_script.php',
type: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
'X-Requested-With': 'XMLHttpRequest'},
data: {my:ciphered_get_parameters},
success: function (result) {
console.log(result);
}
});
});
Here is what I have server side for the moment : (server_side_script.php)
<?php
header('Content-Type:application/json');
header("Access-Control-Allow-Origin:https://ownspace.thrivecart.com");
header("Access-Control-Allow-Headers", "Content-Type, Authorization, X-Requested-With, Accept");
// Special data treatment
I get this error on the thrivecart page :
Failed to load https://emails.mycustomer.com/server_side_script.php: Request header field X-Requested-With is not allowed by Access-Control-Allow-Headers in preflight response.
However, I read that "
Access-Control-Allow-Headers :
Indicates which headers are supported by the response’s url for the purposes of the CORS protocol."
As the header is on in the PHP code, I don't understand why it does not work.
I even tried to set the X-Requested-With header in the response with NGINX conf file, restarting the server.
But, I think I miss a point.
Appears to be a typo in
header("Access-Control-Allow-Headers", "Content-Type, Authorization, X-Requested-With, Accept");
Try
header("Access-Control-Allow-Headers:Content-Type, Authorization, X-Requested-With, Accept");
Related
Even though I set the headers in the file functions.php, the error keeps appearing, I tried with several different hooks:
function add_cors_http_header()
{
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-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, PUT");
if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']))
header("Access-Control-Allow-Headers: {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");
exit(0);
}
}
add_action('init', 'add_cors_http_header');
add_action('send_headers', 'add_cors_http_header');
add_action('rest_pre_serve_request', 'add_cors_http_header');
(Not all add_action at the same time)
And I also tried without the isset and in the header.php
EDIT ---
As requested, the client that is running is Vanilla Javascript, I made the same fetch on Postman and it worked, it's about joining a user to a guild in discord, hre is the code:
const args = JSON.stringify({
access_token: token,
});
const response = await fetch(
`https://discord.com/api/guilds/${this.guildID}/members/${userID}`,
{
method: "PUT",
headers: {
"Content-Type": "application/json",
Authorization: `BOT ${this.bot_token}`,
},
body: args,
}
);
Access-Control-Allow-Origin (and similar headers) are for the server to define, and not the client. In this case, the server is the Discord API.
I'm guessing the confusion here is that your client is JavaScript, but you're trying to modify the headers in PHP. I think you should try to add the headers in JavaScript directly. Perhaps there's an Origin header you need?
I suggest looking at your Postman headers being sent and add them right in your JavaScript. For example:
headers: {
"Content-Type": "application/json",
Authorization: `BOT ${this.bot_token}`,
Origin: "http://localhost",
},
If that doesn't work, open your Chrome Dev Tools, open the Network tab, and look at the outgoing request, and see what headers it is sending and compare them with Postman. If Postman can work, just repeat what it is doing.
Regarding the WordPress function, I think you can remove it entirely as JavaScript is the client, not PHP/WordPress.
I'm building an API, for training purposes. I now have to send a POST request containing information. I'm using React JS and PHP, the problem is that everytime I send a request, the CORS error still shows up on the browser.
My JS file that sends the POST is, I changed the URL, because it's on my personal server:
axios.post('https://myurl/api/book/create.php', {
data: JSON.stringify(values, 0, 2)
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
and on the server side, I have the following
<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");
header("Access-Control-Allow-Methods: POST");
header("Access-Control-Max-Age: 3600");
header("Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");
With postman the request goes smoothly, but every single time sending through the browser
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://myurl/api/book/create.php. (Reason: CORS request did not succeed
Please make sure that you allow CORS in backend server. Then, you need send header for axios like following example
axios.defaults.headers.post['Content-Type'] = 'application/json';
axios.defaults.withCredentials = true;
axios.defaults.crossDomain = true;
(Or setting it in third paramenter after data)
You have to use either localhost or 127.0.0.1 for all the requests. In general in your code you should make calls to the server by just appending the URI to the current host, without re-adding the host and port in the URI string.
Answer based on: CORS request did not succeed
I am sending a POST request to a different domain like so in angular:
$http.post('http://domain.com/auth', { email: $scope.email, password: $scope.password })
And in my request logs, it was only sending an OPTION request.
So I added this to my domain.com/auth:
header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
header('Access-Control-Allow-Methods: GET, POST, PUT');
But now, I am getting an OPTION request first, and then a POST request. So because my OPTION request is first, I think it is still messing with my results.
Does anyone know how to only get the POST request and not the OPTIONS request?
You can prevent a preflight on POST by triggering a simple request
To achieve this, use $httpParamSerializerJQLike to encode your data (make sure to inject the serializer) and set the content-type to application/x-www-form-urlencoded:
$http({
url: 'YOUR_ENDPOINT',
method: 'POST',
data: $httpParamSerializerJQLike(YOUR_DATA),
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
I'd like to load a site from a different domain. I've already set headers through php in my header.php file:
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: PUT, GET, POST, DELETE, OPTIONS");
header("Access-Control-Allow-Headers: *");
I've searched around for the correct way to do the ajax request with cross domain enabled and ended up with this:
$.ajax(
{
type: 'GET',
url: target,
processData: true,
data: {},
dataType: "json",
success: function (data)
{
$("#toolsarea").attr('src', target);
}
});
but I still get the error "No 'Access-Control-Allow-Origin". Is there still something I'm missing?
Your issue is related to Same origin policy which prevent JavaScript to make an AJAX request for security reasons.
You need to make sure CORS is enabled on your PHP server.
You can do it using:
<?php
header("Access-Control-Allow-Origin: *")
More information on how to enable CORS on your server can be found here:
http://enable-cors.org/server_php.html
You can read more about Same-origin policy on the client here:
https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy
So I'm making an AJAX request from a node server to a PHP server. The PHP server looks like this:
header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
echo json_encode($data);
The request is being sent via AngularJS list this:
app.controller('MainController', function($scope, $http) {
var req = {
method: 'POST',
url: 'http://testsite.com/api/login',
headers: {
'Content-Type': 'application/json'
},
data: {
Data : {
email: 'test',
}
}
}
$http(req)
.success(function(response){ console.log(response); })
.error(function(){ console.log("error")});
});
This works perfectly. The problem starts when I run this within an NodeJS app, everything is exactly the same except that the NodeJS with ExpressJS is running node bin/www. The error I get is:
Failed to load resource: the server responded with a status of 405 (Method Not Allowed)
Failed to load resource: Request header field Content-Type is not allowed by Access-Control-Allow-Headers
XMLHttpRequest cannot load http://testsite.com/api/login. Request header field Content-Type is not allowed by Access-Control-Allow-Headers
Any idea on what I could be missing?
Try adding this header in PHP server response
Access-Control-Allow-Methods: GET, POST
The client needs to know which methods the server can handle as part of the pre-flight request