Enable CORS
The CORS policy allows users to enable the Cross-Origin Resource Sharing mechanism on API7 Cloud.
You can configure the CORS policy in an Application or an API.
- If you configure the CORS policy only for an Application, it'll affect all APIs in this Application.
- If you configure the CORS policy only for an API, then the CORS policy only affects this API.
- If you configure the CORS policy for both an Application and an API, the CORS policy in API takes precedence.
How to Configure CORS Policy
You can configure the CORS policy when creating or updating an Application or API.
In the above image, you can see:
Access-Control-Allow-Origin
is set tohttp://127.0.0.1:9080
.Access-Control-Allow-Methods
is set toGET
.Access-Control-Max-Age
is set to5
(seconds).Access-Control-Allow-Credentials
isfalse
.Access-Control-Allow-Headers
andAccess-Control-Expose-Headers
are set to*
.
How to Test the CORS Policy
First, deploy a data plane instance and connect to the API7 Cloud. Please see Add a data place instance and connect it to the API7 Cloud to learn the details.
Then we can send a request to verify the CORS policy.
curl http://127.0.0.1:9080/v1/json -H 'Host: cloud.httpbin.org' -H 'Origin: http://127.0.0.1:9080' -X OPTIONS -i
HTTP/1.1 200 OK
Date: Wed, 13 Apr 2022 07:07:53 GMT
Content-Type: text/plain; charset=utf-8
Transfer-Encoding: chunked
Connection: keep-alive
Server: APISIX/2.13.1
Access-Control-Allow-Origin: http://127.0.0.1:9080
Vary: Origin
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 5
Access-Control-Expose-Headers: *
Access-Control-Allow-Headers: *
As you can see, the CORS headers are the same as the ones in the above image that we set.
info
the CORS policy overrides the CORS headers from upstream. But the
Access-Control-Allow-Credentials
header is special. The CORS policy doesn't
set this header if the value is false
. So in such a case, if you still see
the Access-Control-Allow-Credentials
header in the response, it means that
it's your upstream set it.