Home>
When accessing API (RAILS) from the front end (NUXT) to AXIOS, it becomes a CORS error, and I am wondering how to set Rails's CORS.
As of the following source code, I tried some, but it was a similar CORS error.
If this happens, should I fix the IP of the container?
It is saved when you can teach you.
browser error
Access to XMLHTTPREQUEST AT 'HTTP://127.0.0.1: 5000//27.0.0.1: 5000 //xxx' from Origin 'http: //localhost: 7000' 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.
Source Code
API_RAILS /CONFIG /INITIALIZERS /CORS.RB
Rails.Application.Config.Middleware.Insert_before 0, Rack :: Cors DO Allow DO Origins 'NUXT container name', 'localhost', 'localhost: 5000', '127.0.0.1', '0.0.0.0', '0.0.0.0: 5000' Resource '*', Headers :: Any, Methods: [: get ,: post ,: put ,: patch,: delete,: options: Head] END END
NUXT.CONF.JS
AXIOS: { BaseUrl: 'http: //api_rails: 5000 /API /', BrowserBaseUrl: 'http://127.0.0.1: 5000/API/', }
Environment
Rails Container External Port 5000
Rails Container Internal Port 3000NUXT Container External Port 7000
NUXT Container Internal Port 3000Both server hosts start with 0.0.0.0
-
Answer # 1
Related questions
- docker : About the design of SPA and RESTAPI by NUXT.JS and SPRINGBOOT
- If you access with NUXT SAFARI, you will get a CORS error
- Get 404 access from HEROKU (NUXT) to HEROKU (RAILS)
- Rails + PostgreSQL + NGINX ON DOCKER When building MacOS Chrome 502 BAD GATEWAY
- I don't know how to test a subdomain with docker-compose + Rails5.1 + rspec+ HeadlessChrome
- I can't access localhost: 3000 with docker-compose + nuxt.
- javascript : The ESLint Error that was once displayed continues to be displayed even after the bug is fixed (Nuxt.js)
- typescript - when i tried to create a nuxtjs environment with docker, i got an error saying cannot read file tsconfigjson
- nodejs - [nuxt] in ssr mode, even if axios is executed on the server side, the error connect econnrefused 127001:8000 is output
Cross Origin is treated if it is different for any one of Scheme, Host, and Port.
The server side is http: //localhost: 7000, the client side (browser) is http://localhost: 5000.
Scheme is HTTP, Host, LocalHost, Port is different from Port at 5000 and 7000, and CROSS ORIGIN is treated. To grant this, you need to allow communication from LocalHost: 5000 Origin on the Rails side. There is no problem because it is specified for Rails Origins. Other descriptions are no longer needed.
This problem is the AXIOS Base URL. When you access Docker from the Docker host, the Docker's internal name resolution is not available, so HOST on the Rails side seen from the browser must specify localhost: 5000. I think that the following settings will be.