CORS Policy Error #1762

dominic01 · 2021-04-14T17:29:25Z

dominic01
Apr 14, 2021

Mojolicious version: 8.7
Perl version: 5.16
Operating system: CentOS 7
PHP 7.3 Apache 2.4.43

Steps to reproduce the behavior

I keep getting "Access to XMLHttpRequest at 'http://12.34.56.78:8075/' from origin 'http://localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource." for hello world like web services. This is happening when I call these services through browser or AJAX.

Sample PHP Code:

<!doctype html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
</head>
<body>
<form id="loginform" method="post">
    <div>
        Username:
        <input type="text" name="username" id="username" value="aaaa"/>
        <input type="submit" name="loginBtn" id="loginBtn" value="Login" />
    </div>
</form>
<script type="text/javascript">
$(document).ready(function() {
    $('#loginform').submit(function(e) {
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: 'http://112.34.56.78:8075/',
            data: $(this).serialize(),
            success: function(response) {
                var jsonData = JSON.parse(response);
  
                // user is logged in successfully in the back-end
                // let's redirect
                if (jsonData.success == "1") {
                    location.href = 'my_profile.php';
                }
                else {
                    alert('Invalid Credentials!');
                }
           }
       });
     });
});
</script>
</body>
</html>

Expected behavior

This Mojolicious web service http://112.34.56.78:8075/ returns {text: "Hello World"}
I tried to add the below header as well.
$c->res->headers->access_control_allow_origin('*');

Actual behavior

I am getting the above error in the browser debug console.

akuks · 2021-04-14T17:32:34Z

akuks
Apr 14, 2021

On Mojolicious backend add this under the startup function


$self->hook(after_dispatch => sub { 
    my $c = shift; 
    $c->res->headers->header('Access-Control-Allow-Origin' => '*'); 
    $c->res->headers->access_control_allow_origin('*');
    $c->res->headers->header('Access-Control-Allow-Methods' => 'GET, OPTIONS, POST, DELETE, PUT');
    $c->res->headers->header('Access-Control-Allow-Headers' => 'Content-Type' => 'application/x-www-form-urlencoded');

});

I believe it will fix the CORS issue

0 replies

dominic01 · 2021-04-14T17:54:22Z

dominic01
Apr 14, 2021
Author

Sorry I dont understand where to add this. my test script here.

#!/usr/bin/env perl
use Mojolicious::Lite;

get '/' => sub {
        my $c = shift;
        $c->res->headers->access_control_allow_origin('*');
        $c->render(text => 'Hello World!');
};

app->start;

0 replies

jberger · 2021-04-14T18:31:53Z

jberger
Apr 14, 2021
Maintainer

This is not a bug in mojolicious. I wish there was a button to move an Issue to the Discussions page instead but as far as I understand it there is no such function. As it is I will close this Issue but I encourage the discussion to continue by moving to the Discussion page.

0 replies

jberger · 2021-04-14T18:32:42Z

jberger
Apr 14, 2021
Maintainer

Oh, my apologies, I see it now!

0 replies

dominic01 · 2021-04-14T18:46:05Z

dominic01
Apr 14, 2021
Author

Absolutely it's not a bug. My bad, posted in a wrong area.

hook after_dispatch => sub {
...
}

Seems to be working. Need to check further.

0 replies

akuks · 2021-04-14T18:50:02Z

akuks
Apr 14, 2021

It should work otherwise try with

options '*' => sub {
....
}

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

CORS Policy Error #1762

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 6 comments

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Select a reply

Uh oh!

CORS Policy Error #1762

Uh oh!

Uh oh!

dominic01 Apr 14, 2021

Steps to reproduce the behavior

Expected behavior

Actual behavior

Replies: 6 comments

Uh oh!

Uh oh!

akuks Apr 14, 2021

Uh oh!

dominic01 Apr 14, 2021 Author

Uh oh!

jberger Apr 14, 2021 Maintainer

Uh oh!

jberger Apr 14, 2021 Maintainer

Uh oh!

dominic01 Apr 14, 2021 Author

Uh oh!

Uh oh!

akuks Apr 14, 2021

dominic01
Apr 14, 2021

akuks
Apr 14, 2021

dominic01
Apr 14, 2021
Author

jberger
Apr 14, 2021
Maintainer

jberger
Apr 14, 2021
Maintainer

dominic01
Apr 14, 2021
Author

akuks
Apr 14, 2021