CORS Issue: Access to XMLHttpRequest Blocked - No 'Access-Control-Allow-Origin' Header

[Nemo11235]

Encountered error when sending request to backend, error message on console as follow:

Access to XMLHttpRequest at 'http://localhost:8000/api/get_openai_response/' from origin 'http://localhost:3000/' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Branch: setup-backend

**background Statement: Attempting to send question for openai API at backend server and receive a respond to display on frontend ""

Steps to Reproduce

1. Start the Django backend service: python manage.py runserver
2. Start the frontend service: npm start or other command
3. Attempt to access the backend API from the frontend by entering something in the input blank and click enter button

Expected Behavior

I expect to access the backend API from the frontend without being restricted by CORS issues.

Project Configuration

• Django Version: 4.0.4

Attempted Solution

1. Tried reinstallign cors using pip install django-cors-headers
2. in setting.py, adding the following code according to solution provided by ChatGPT: MIDDLEWARE = [ ... 'corsheaders.middleware.CorsMiddleware', ... ]

CORS_ALLOWED_ORIGINS = [ "http://localhost:3000", ]

allow all HTTP methods

CORS_ALLOW_METHODS = [ 'DELETE', 'GET', 'OPTIONS', 'PATCH', 'POST', 'PUT', ]

allow all HTTP heads

CORS_ALLOW_HEADERS = [ 'Accept', 'Accept-Encoding', 'Authorization', 'Content-Type', 'Origin', 'User-Agent', ]

[AlfredAria]

There's some progress I see that. To elaborate your question, I think the problem statement need to include a few more things: 1) Which branch and which commit is your code on? If I want to reproduce, I need to git pull the branch to the up-to-date commit. 2) Your third step is not clear enough to help reproduce the problem. Perhaps I'd been looking at the wrong commit, but I only saw "Hello from the backend!" on the browser. The text is hardcoded in a server.js which I think belongs to an express server which I believe comes with the initialization of the react frontend.

Besides, the first paragraph should be a background statement or what you are trying to do. I imagine this is what you are doing: "Write an input box and a submit that when the submit is hit, the frontend should send an HTTP request to the backend, to verify connection between the frontend and the backend servers."

For the error you encountered, please first research and understand the meaning of CORS. This post https://stackoverflow.com/questions/19966707/cors-error-on-same-domain shows a similar problem as yours, and a simple solution that may be insecure for production servers. Please update your problem statement for clarity, and see if you could get yourself right. The attempted solutions were great, but I think it won't be that complicated, and no extra dependencies should actually be needed.

[Nemo11235]

Thanks for the feedback, I just noticed that the branch was up to date so I did a git push. I also added the background statement and branch name in the issue as suggested. For next step, I'll do more research to figure out the solution to this.

[AlfredAria]

Hi Allen, finally got some time to go over your issue. In short, your issue was only partly related to CORS. The other was merely your URL config was not linked into the server's URL configuration file. Meanwhile, I'd discovered other issues that could have blocked you from getting the HTTP channel connected. Please spend some time to look through the code comments in the following commit on a pull request to your repository:

https://github.com/Nemo11235/ChatGPT-API/pull/2/commits/8b3ae7bb2924246bd5da9761dd2fa96f5523c704

You don't have to worry about how the pull request is generated, or approve the Pull Request, but instead, please go through each detail and add the changes to your own repository manually. Pushing a commit directly to main is fine.

Aside from making progress, I would like you to recap on the engineering process that you experienced and think more on what you learnt from the research and debugging.

[AlfredAria]

Please take attention on the comments I labeled with [NOTE].

[AlfredAria]

Hi Allen, if you agree there is no more actionable items on this issue, you may close it to indicate we don't need to follow up here any more. The Issue is closed but not deleted for documentation purpose in case we need to revisit it in the future.

https://www.google.com/search?q=github+mark+issue+as+closed&rlz=1C5CHFA_enUS986US986&oq=github+mark+issue+as+closed&gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIGCAEQRRhA0gEIMzI3M2owajeoAgCwAgA&sourceid=chrome&ie=UTF-8