CORS Error while using the Elastic Enterprise Search

Hi,

I have deployed the Enterprise Search using docker and when I am trying to access it, using react-js client(@elastic/search-ui-app-search-connector). I am getting CORS Error as the URL for both are different.

Just like, elasticsearch is there any way to pass the list of URLs to the Access-Control-Allow-Origin ?

Hi :wave: Enterprise Search does allow CORS requests to the App Search API from any origin. What endpoints/APIs are you seeing errors from?

Hi @orhantoy,

I am getting the below error.

An unexpected error occurred: Origin https://staging.ui.xyz.com is not allowed by Access-Control-Allow-Origin.

My App Search URL is - https://staging.appsearch.xyz.com/

ReactJs - @elastic/search-ui-app-search-connector

React Component is Creating this URL - https://staging.appsearch.xyz.com/api/as/v1/engines/blahblah/search.json

Error:

What version of App/Enterprise Search are you using?

Also, can I get you to perform a preflight request to the API and tell what CORS headers are being returned?

enterprise-search:7.10.2 is the one, I am using.

Headers:

OPTIONS /api/as/v1/engines/blahblah/search.json HTTP/1.1
Host: staging.appsearch.xyz.com
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:85.0) Gecko/20100101 Firefox/85.0
Accept: */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Access-Control-Request-Method: POST
Access-Control-Request-Headers: authorization,content-type,x-swiftype-client,x-swiftype-client-version,x-swiftype-integration,x-swiftype-integration-version
Referer: https://staging.ui.xyz.com/blahblah/search
Origin: https://staging.ui.xyz.com
Connection: keep-alive

Can you see the response to that request? More specifically, I'm interested in the CORS-related response headers.

Please find below the response:

HTTP/1.1 200 OK
date: Tue, 09 Feb 2021 06:20:17 GMT
allow: GET,HEAD,POST,OPTIONS
server: Jetty(9.4.30.v20200611)
access-control-allow-credentials: true
access-control-allow-origin: https://staging.ui.xyz.com
access-control-allow-headers: x-swiftype-client, x-swiftype-client-version, x-swiftype-integration, x-swiftype-integration-version, Origin, X-Requested-With, Content-Type, Accept, Authorization, JSNLog-RequestId, activityId, applicationId, applicationUserId, channelId, senderId, sessionId, X-Forwarded-Proto, DNT, X-CustomHeader, Keep-Alive, User-Agent, If-Modified-Since, Cache-Control, Content-Range, Range, X-Auth-Token
access-control-max-age: 3628800
access-control-allow-methods: GET, DELETE, OPTIONS, POST, PUT
connection: close

I'm a bit surprised that you get the error

An unexpected error occurred: Origin https://staging.ui.xyz.com is not allowed by Access-Control-Allow-Origin.

when the preflight response includes the header

access-control-allow-origin: https://staging.ui.xyz.com

Do you experience the same error in different browsers?

Yes, I am getting the same error in other browsers as well.
Safari, Chrome, and Firefox are throwing the same error.

Do you have nginx, Apache, or something else in front of Enterprise Search?

The response headers I get from a Cloud deployment are a bit different from yours:

access-control-allow-credentials: true
access-control-allow-headers: origin, x-requested-with
access-control-allow-methods: GET, POST
access-control-allow-origin: https://foo.bar.org
access-control-max-age: 7200
cache-control: no-cache
server: Jetty(9.4.30.v20200611)

access-control-allow-methods are different, and I'm not seeing allow in my response.
I'm wondering if this is a Docker issue :thinking:

I have fixed this issue by configuring the CORS setting on HAPROXY.