Develop Reference

VueJS POST 404 Not Found

My aim is to run my Quasar app to other devices connected to the Local Area Network. I managed to run them as expected although, when I was logging in to the website, I am having this error POST http://10.0.0.20:8080/MyComposer/?submitId=3 404 (Not Found) despite working
fine on my localhost before. Why is it not reading the Classes in my index.php at the backend folder properly?
P.S. I don't know if this could solve my problem but when I used phpinfo() to debug, I noticed that the REQUEST_METHOD there is GET instead of POST. Is it possible to swap them? I'll try whatever you guys give me.
Console
General
Request URL: http://10.0.0.20:8080/MyComposer/?submitId=3
Request Method: POST
Status Code: 404 Not Found
Remote Address: 10.0.0.20:8080
Referrer Policy: no-referrer-when-downgrade
Response Headers
Connection: keep-alive
Content-Length: 151
Content-Security-Policy: default-src 'none'
Content-Type: text/html; charset=utf-8
Date: Tue, 28 Jul 2020 12:18:12 GMT
Vary: Accept-Encoding
X-Content-Type-Options: nosniff
X-Powered-By: Express
Request Headers
Accept: application/json, text/plain,
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.9,es;q=0.8
Connection: keep-alive
Content-Length: 49
Content-Type: application/json
Host: 10.0.0.20:8080
Origin: http://10.0.0.20:8080
Referer: http://10.0.0.20:8080/
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.105 Safari/537.36
Headers.php
<?php
header('Access-Control-Allow-Origin: http://10.0.0.20:8080/'); //OR EITHER http://10.0.0.20:8080/ OR .$_SERVER['HTTP_ORIGIN']
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Allow-Max-Age: 3600');
if (strtoupper($_SERVER['REQUEST_METHOD']) === 'OPTIONS') {
if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']))
header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS");
if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']))
header("Access-Control-Allow-Headers: {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");
exit(0);
}
store.js
actions: {
LOGIN (context, payload) {
return new Promise((resolve, reject) => {
axios
.post('/MyComposer/', payload, {
headers: { 'Content-Type': 'application/json' },
params: {
submitId: 3
}
})
index.php
<?php
require 'Classes/Headers.php';
require 'vendor/autoload.php';
echo 'Hello!';
phpinfo();
use Classes\SubjectClass;
use Classes\TestClass;
use Classes\AnswerClass;
use Classes\LoginClass;
use Classes\RegisterClass;
use Classes\TeacherClass;
use Classes\StudentClass;
use Classes\AccountClass;
use Classes\AccessClass;
use Classes\SchoolClass;
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$addsubject = new SubjectClass();
$addsubject->addSubject();
$addtest = new TestClass();
$addtest->addTest();
$submitTest = new AnswerClass();
$submitTest->submitTest();
$submitLoginData = new LoginClass();
$submitLoginData->submitLoginData();
$addAccountData = new RegisterClass();
$addAccountData->addAccountData();
$addSchool = new SchoolClass();
$addSchool->addSchool();
}

The problem was caused not by a coding error but due to two webservers being installed on the affected system, a XAMPP installation running on the default port 80 and a Node.Js server running on port 8080.
To diagnose the problem we first copypasted the URL being used in the script into a browser window which gave the same 404 HTTP error. This excluded the option that the axios.post() method caused the behavior.
Next the basic HTTP port assignment was tested. Calling the address http://10.0.0.20 (user's IP inside the local network) gave the correct XAMPP homepage. When checking the httpd.conf and in it the Listen setting (which should have been Listen 8080) we saw the Apache was using the default HTTP port isntead. Changing it to 8080 (as was used in the script) and restarting Apache resulted in the server not starting with the error:
Problem detected! Port 8080 in use by "C:\Program
Files\nodejs\node.exe" with PID 3808! Apache WILL NOT start without
the configured ports free! You need to uninstall/disable/reconfigure
the blocking application or reconfigure Apache and the Control Panel
to listen on a different port.
It was now sure that messed up ports were the cause of the problem. Removing the :8080 from the scripts made sure the requests were sent to the right server.

CORS Server Configuration

I'm having a CORS issue hitting an API and trying to work out the issue with the API provider but it's a little over my head.
the get request I am sending using axios is
axios({
method: 'post',
url: <endpoint url>,
data: someDataObj,
headers: {
'Authorization': <api key>,
'Content-Type': 'application/json;charset=UTF-8'
}
})
The server is configured to allow
headers: Authorization,Content-type
methods: POST,GET,OPTIONS
origin: *
The error in chrome is
Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
and the network response is
GENERAL
Request URL: <api url>
Request Method: OPTIONS
Status Code: 500 Internal Server Error
Remote Address: 128.136.1.24:443
Referrer Policy: no-referrer-when-downgrade
RESPONSE HEADERS
Access-Control-Allow-Headers: Authorization,Content-Type
Access-Control-Allow-Methods: POST,GET,OPTIONS
Access-Control-Allow-Origin: *
Content-Type: application/json;charset=UTF-8
Date: Wed, 30 Jan 2019 17:22:53 GMT
Server: Microsoft-IIS/8.5
Transfer-Encoding: chunked
X-Powered-By: ASP.NET
REQUESTHEADERS
Provisional headers are shown
Access-Control-Request-Headers: authorization,content-type
Access-Control-Request-Method: POST
Origin: <domain>
Referer: <page url>
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36
Everything seems to be configured right, but like I said I'm not super familiar with this stuff so maybe we're missing something simple.

Chrome thinks, that your request is not a simple request and does a preflighted request (OPTIONS instead of POST). This is because of your Authorization header and the value of your Content-Type header. Both require a preflighted (OPTIONS) request.
The server responds to the preflighted request, but he also sends the status code 500 (Internal Server Error) along with it, which should not happen. The status code should be 200 (OK). That's why Chrome denies the response to the OPTIONS request and never does the actual POST request. It's an server side issue.

How to solve CORS redirection with express js router?

I'm trying to implement OAuth2 authentication. When I try to send Authorization code I get this error:
XMLHttpRequest cannot load link1.
Redirect from link1 to link2
has been blocked by CORS policy: Request requires preflight, which is
disallowed to follow cross-origin redirect.
My req/rsp looks like this:
General:
Request URL:link1
Request Method:OPTIONS Status Code:204 No
Content Remote Address:
Response Headers: HTTP/1.1 204 No Content X-Powered-By: Express
Access-Control-Allow-Origin: * Access-Control-Allow-Methods:
GET,HEAD,PUT,PATCH,POST,DELETE Access-Control-Allow-Headers:
content-type, sessionid Date:
Request Headers: OPTIONS /authorize HTTP/1.1 Host: host Connection:
keep-alive Access-Control-Request-Method: POST Origin: origin_link
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML,
like Gecko) Chrome/56.0.2924.76 Safari/537.36
Access-Control-Request-Headers: content-type, sessionid Accept: /
Referer: origin_link/dialog Accept-Encoding: gzip, deflate, sdch, br
Accept-Language: en-US,en;q=0.8

Maybe you have not configured express to accept CORS request.
In a small project, I had to configure CORS request in an Express application. My code was:
// Enable CORS
app.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'GET,POST,DELETE');
res.header('Access-Control-Allow-Headers', 'Origin, X-Requested With, Content-Type, Accept');
next();
});
app is a variable corresponding to an Express instance.
Moreover, I did find an npm package to set CORS request to an express app, but I have never used it:
https://github.com/expressjs/cors

hapi.js Cors Pre-flight not returning Access-Control-Allow-Origin header

I have an ajax file upload using (Dropzone js). which sends a file to my hapi server. I realised the browser sends a PREFLIGHT OPTIONS METHOD. but my hapi server seems not to send the right response headers so i am getting errors on chrome.
here is the error i get on chrome
XMLHttpRequest cannot load http://localhost:3000/uploadbookimg. 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:4200' is therefore not allowed access.
this is the hapi js route handler
server.route({
path: '/uploadbookimg',
method: 'POST',
config: {
cors : true,
payload: {
output: 'stream',
parse: true,
allow: 'multipart/form-data'
},
handler: require('./books/webbookimgupload'),
}
});
In my understanding hapi js should send all cors headers from the Pre-fight (OPTIONS) request.
Cant understand why its is not
Network request /response from chrome
**General**
Request Method:OPTIONS
Status Code:200 OK
Remote Address:127.0.0.1:3000
**Response Headers**
view parsed
HTTP/1.1 200 OK
content-type: application/json; charset=utf-8
cache-control: no-cache
vary: accept-encoding
Date: Wed, 27 Apr 2016 07:25:33 GMT
Connection: keep-alive
Transfer-Encoding: chunked
**Request Headers**
view parsed
OPTIONS /uploadbookimg HTTP/1.1
Host: localhost:3000
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Access-Control-Request-Method: POST
Origin: http://localhost:4200
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.87 Safari/537.36
Access-Control-Request-Headers: accept, cache-control, content-type
Accept: */*
Referer: http://localhost:4200/books/upload
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8
Thanks in advance

The hapi cors: true is a wildcard rule that allows CORS requests from all domains except for a few cases including when there are additional request headers outside of hapi's default whitelist:
["accept", "authorization", "content-type", "if-none-match", "origin"]
See the cors option section in the API docs under route options:
headers - a strings array of allowed headers ('Access-Control-Allow-Headers'). Defaults to ['Accept', 'Authorization', 'Content-Type', 'If-None-Match'].
additionalHeaders - a strings array of additional headers to headers. Use this to keep the default headers in place.
Your problem is that Dropzone sends a couple of headers along with the file upload that aren't in this list:
x-requested-with (not in your headers above but was sent for me)
cache-control
You have two options to get things working, you need to change something on either the server or the client:
Option 1 - Whitelist the extra headers:
server.route({
config: {
cors: {
origin: ['*'],
additionalHeaders: ['cache-control', 'x-requested-with']
}
},
method: 'POST',
path: '/upload',
handler: function (request, reply) {
...
}
});
Option 2 - Tell dropzone to not send those extra headers
Not possible yet through their config but there's a pending PR to allow it: https://github.com/enyo/dropzone/pull/685

I want to add my 2 cents on this one as the above did not fully resolve the issue in my case.
I started my Hapi-Server at localhost:3300. Then I made a request from localhost:80 to http://localhost:3300/ to test CORS. This lead to chrome still blocking the ressource because it said that
No 'Access-Control-Allow-Origin' header is present on the requested
resource
(which was not true at all).
Then I changed the XHR-Request to fetch the url to a url for which I actually created a route inside HapiJS which - in my case - was http://localhost:3300/api/test. This worked.
To overgo this issue I created a "catch-all" route in HapiJS (to overgo the built-in 404 catch).
const Boom = require('Boom'); //You can require Boom when you have hapi
Route({
method: '*',
path: '/{any*}',
handler: function(request, reply) {
reply(Boom.notFound());
}
})

Angular + Rails Access-Control Headers

I'm getting an Access-Control-Allow-Origin error when doing an $http.post to the opencalais API from my Angular controller in my Rails app:
XMLHttpRequest cannot load https://api.thomsonreuters.com/permid/calais?access-token=APIKEY. The 'Access-Control-Allow-Origin' header has a value 'http://developer.permid.org' that is not equal to the supplied origin. Origin 'http://localhost:3000' is therefore not allowed access.
Here's the API call inside my Angular controller:
function fetchTags() {
var token = API-KEY,
query = $scope.brief.description;
$http.post('https://api.thomsonreuters.com/permid/calais?access-token=' + token, query, {
headers: {
'Content-Type': 'text/raw',
'OutputFormat': 'application/json',
'X-AG-Access-Token': API-KEY,
'Access-Control-Allow-Origin': '*'
}
}).success(function(data) {
console.log(data);
});
}
I've read and tried several different ways of setting the Access-Control headers, either through the Angular request or even through something like a before_filter in the Rails application_controller.rb, but they all seem to result in the same response.
Furthermore, I've replicated the request in Postman, just by setting the URL and Headers to the same as above, and it works perfectly.
Any ideas or links would be greatly appreciated, thanks
EDIT: Here's the request/response headers from Chrome:
Request:
OPTIONS /permid/calais?access-token=API-KEY HTTP/1.1
Host: api.thomsonreuters.com
Connection: keep-alive
Access-Control-Request-Method: POST
Origin: http://localhost:3000
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.107 Safari/537.36
Access-Control-Request-Headers: accept, access-control-allow-origin, content-type, outputformat, x-ag-access-token, x-csrf-token
Accept: /
DNT: 1
Referer: http://localhost:3000/
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8
Response:
HTTP/1.1 200 OK
Content-Type: application/json
Access-Control-Allow-Origin: http://developer.permid.org
Access-Control-Allow-Headers: accept, x-ag-access-token, authorization, outputformat, content-type, x-openmatch-numberofmatchesperrecord, x-openmatch-datatype, x-calais-language
Access-Control-Max-Age: 3628800
Access-Control-Allow-Methods: GET, POST, OPTIONS
Origin: http://localhost:3000
Content-Length: 0
Connection: keep-alive