Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Frontend send ajax request to Egg has an error of CORS or OPTIONS 405 Method Not Allowed #45

Closed
mattma opened this issue Aug 14, 2016 · 6 comments
Closed

Frontend send ajax request to Egg has an error of CORS or OPTIONS 405 Method Not Allowed #45

mattma opened this issue Aug 14, 2016 · 6 comments
Labels
plugin: egg-cors type: discussion

Comments

@mattma
Copy link
Contributor

mattma commented Aug 14, 2016 •
edited

Goal: Egg works as simple RESTful api server, Frontend communicates with Egg via Ajax requests. Browser (Chrome latest) has Cross Origin enabled by default. Egg enabled CORS, frontend sends a request and need to get the payload back from Egg.

I have created an Angular frrontend and trying to talk to Egg ONLY via RESTful api. But I run into an issue of CORS. This is the error message from browser console:

XMLHttpRequest cannot load http://localhost:7001/api/user. 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:63342' is therefore not allowed access.

I am not sure that it is an error from front end, or egg, or its plugins: egg-rest, egg-cors, or just an User error.

Here is how you can duplicate the issue.

1st Use [examples/restful_api] , then enabled cors plugins at [here](https://github.com/eggjs/egg/tree/master/examples/restful_api)(https://github.com/eggjs/egg/blob/master/examples/restful_api/config/plugin.js#L3)

// restful_api/config/plugin.js
exports.cors = true;
exports.rest = true;

Note: it works on curl with/without cors=true. and all CRUD operation works as expected.

2nd Frontend ajax request: Here I included a simple HTML with jquery ajax caller.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
  <script>
    jQuery.ajax({
      url: "http://localhost:7001/api/user",
      type: "GET",
      contentType: "application/json",
      async: true,
      crossDomain: true,
      beforeSend: function(xhr) {
        xhr.setRequestHeader('X-Test-Header', 'test-value');
      },
      success: function( users ) {
        console.log('users: ', users)
      }
    });
  </script>
</body>
</html>

3rd - Load up in the browser, I see the error below:

screen shot 2016-08-14 at 9 57 59 am

Error on terminal console

screen shot 2016-08-14 at 10 02 38 am
@popomore
Copy link
Member

The page and the rest api have a different port, so if you request using ajax, server should return Access-Control-Allow-Origin header.

It seems the origin config in cors has some problem. You can try simply override the function in https://github.com/eggjs/egg-cors/blob/master/app.js#L12 and return '*' to fix it.

@popomore
Copy link
Member

@fengmk2 这个是不是放 config，这样可以直接在 config 里覆盖方法了。

https://github.com/eggjs/egg-cors/blob/master/app.js#L12

@mattma
Copy link
Contributor Author

mattma commented Aug 15, 2016

@popomore Confirmed. It works like charm. Is it a bug in egg-kors?

I believe if user turns on cors via exports.cors = true inside plugin.js. It should provide with * as default options. Then user should be able to customize its own whitelist.

@mattma
Copy link
Contributor Author

mattma commented Aug 15, 2016 •
edited

@popomore @fengmk2

It is not a bug. We can safely close it and we may need to document it somewhere so that other users do not run into this issue since it is not clear where to configure the whitelist.

Here is how I fixed it without modify source code of egg-cors.

// config.local.js
module.exports = {
  security: {
    // value is the full url in a string format
    domainWhiteList: ['http://localhost:4200']
  }
};

@mattma mattma closed this as completed Aug 15, 2016
@mattma mattma mentioned this issue Aug 15, 2016
Merged
@popomore
Copy link
Member

Why your angular app and rest api are starting at different server, the
best practice is Do everything in egg server.

We should add some view example.
Matt Ma notifications@github.com于2016年8月15日 周一上午11:52写道：

Closed #45 #45.

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
#45 (comment), or mute the
thread
https://github.com/notifications/unsubscribe-auth/AAWA1U2jEtDetB--5wqr1FvHbQvCIc4Oks5qf-JzgaJpZM4Jj8BD
.

@mattma
Copy link
Contributor Author

mattma commented Aug 16, 2016

Although I know egg server can serve a static webpage, i want to scale my client side and node.js server side separately in two docker containers managed by kubernetes. so that they are not bundled inside a same container as a single process. Kubernetes can handle scale them separately based on the resources.

@ithinco ithinco mentioned this issue Jan 23, 2018
Closed
elrrrrrrr pushed a commit to elrrrrrrr/egg that referenced this issue Feb 21, 2023
@popomore
feat: add command for all examples (eggjs#45)
02481e1
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
plugin: egg-cors type: discussion
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@popomore @mattma