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 3000

NUXT Container External Port 7000
NUXT Container Internal Port 3000

Both server hosts start with 0.0.0.0

  • Answer # 1

    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.

    AXIOS: {
      BaseUrl: 'http: //localhost: 5000 /API /',
      BrowserBaseUrl: 'http: //localhost: 5000 /API /',
    }
    
    

    Thank you for your reply. I was able to connect. It was easy to understand.

    Hey_Ruby2021-04-07 15:07:37