API and CORS

This public forum is for user-to-user discussions of PHPMaker. Note that this is not support forum.
Post Reply
btrade
User
Posts: 357

API and CORS

Post by btrade »

Hello. I have a problem with CORS.

Access to XMLHttpRequest at 'https://xxx.xxx/api/v1/api/list/arts' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

What can I FIX it?

.htaccess
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ index.php [QSA,L]
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Origin "http://localhost:3000"
Header set Access-Control-Allow-Headers "X-Requested-With, Origin, X-Authorization"
Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, PATCH, OPTIONS"
Header set Access-Control-Allow-Credentials "true"


arbei
User
Posts: 9292

Post by arbei »

You may try API custom headers.


btrade
User
Posts: 357

Post by btrade »

I read this instruction and put everything, but the error still comes out. I removed various items again, but it did not help. What else needs to be done?


arbei
User
Posts: 9292

Post by arbei »

btrade wrote:

I read this instruction and put everything...

What did you mean by "put everything"? If you enable that option and check the generated .htaccess, you should find the required header is added:
Header set Access-Control-Allow-Credentials "true"

You should check HTTP response and see if the header is outputted by your Apache server. If not, you better review your Apache config.


btrade
User
Posts: 357

Post by btrade »

Yes, I have it.

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ index.php [QSA,L]
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Headers "X-Requested-With, Origin, X-Authorization"
Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, PATCH, OPTIONS"
Header set Access-Control-Allow-Credentials "true"

I wrote to support but he say that this is error from my my framework.


arbei
User
Posts: 9292

Post by arbei »

Web server is at a lower level than scripts, a framework cannot remove header set by web server. Make sure Apache's mod_headers is working properly, you can test a simple standalone .html or .php page and check if the headers are outputted.


tekhost
User
Posts: 24

Post by tekhost »

we are face the same error but when we request GET API without X-Authorization the response generated successfully:
with this header:

HTTP/1.1 200 OK
Date: Fri, 12 May 2023 16:45:31 GMT
Server: Apache
Expires: Thu, 19 Nov 1981 08:52:00 GMT
Cache-Control: no-store, no-cache, must-revalidate
Pragma: no-cache
Set-Cookie: PHPSESSID=85516eb70652ec1b4509ce02980ecc12; path=/
Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: *
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, PATCH, OPTIONS
Access-Control-Allow-Credentials: false
Keep-Alive: timeout=5, max=98
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: application/json

when we add X-Authorization this error appears:

Access to XMLHttpRequest at 'Mydomain.app/api/myaction2' from origin 'http://localhost:8101' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

we tried all suggestions in this thread and slim framework questions and stack-overflow : nothing solve this issue!!!


arbei
User
Posts: 9292

Post by arbei »

You may read Access-Control-Allow-Headers and set the header in advanced setting as, e.g. Accept, X-Authorization.


tekhost
User
Posts: 24

Post by tekhost »

We did that and we double check all configurations...
In order to find out the cause of the problem, we uploaded another application on the server based on Laravel, and this problem did not appear...
So we are sure that error not from server configurations.

how we can trace it or any suggestions not listed above to try it

And to be cleared the error is :

"Access to fetch at '' from origin '' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status."

I don't understand this message : "It does not have HTTP ok status."


arbei
User
Posts: 9292

Post by arbei »

arbei wrote:

You may ... set the header in advanced setting as, e.g. Accept, X-Authorization.

X-* headers are custom headers, you should add it in advanced setting API Access-Control-Allow-Headers as above.


btrade
User
Posts: 357

Post by btrade »

I did the standard settings in the phpmaker. Placed the project on a regular hosting. And also on a dedicated server. But this error does not disappear. I don't know what else can be done.


arbei
User
Posts: 9292

Post by arbei »

What is the HTTP response headers from your server now? If you have set the advanced settings as suggested above but you still do not see Access-Control-Allow-Headers: Accept, X-Authorization in the response headers, then your .htaccess is not working and you should check your Apache configuration.


btrade
User
Posts: 357

Post by btrade »

This works well in postman, mobile apps. But it doesn't work for web app in react/nest.


arbei
User
Posts: 9292

Post by arbei »

Then it is not web server issue, you should check the request headers sent by the client.


btrade
User
Posts: 357

Post by btrade »

Where and how can I put these lines, that regeneration these lines don't remove ?

// Add CORS middleware
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
    header('Access-Control-Allow-Origin: *');
    header('Access-Control-Allow-Methods: GET, POST, PUT, PATCH, DELETE, OPTIONS');
    header('Access-Control-Allow-Headers: DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization');
    header('Access-Control-Allow-Credentials: true');
    http_response_code(200);
    return;
}

arbei
User
Posts: 9292

Post by arbei »

arbei wrote:

you should add it in advanced setting API Access-Control-Allow-Headers as above.


btrade
User
Posts: 357

Post by btrade »

Now I don’t see Cors but I see error 401.
But in posmam, it very good works.


tekhost
User
Posts: 24

Post by tekhost »

btrade wrote:

This works well in postman, mobile apps. But it doesn't work for web app in react/nest.

We face the same problem but from mobile app, could you show us how request the API from mobile app with X-authorization?


arbei
User
Posts: 9292

Post by arbei »

btrade wrote:

Now I don’t see Cors but I see error 401.

If your project uses User Level Security and therefore your API requires permissions (e.g. "/api/list/arts" requires List permission of the "arts" table), then make sure you sent the JWT token in the header in your requests.


arbei
User
Posts: 9292

Post by arbei »

tekhost wrote:

We face the same problem but from mobile app, could you show us how request the API from mobile app with X-authorization?

See the following advanced settings:

If you sent the requests from OUTSIDE the PHP application (e.g. from an external mobile app which is not the PHP application), you also need to send the JWT token in the HTTP headers with your requests, see Authenticate User with JWT (JSON Web Token).

Also see replies above.


Post Reply