Why is this endpoint getting a Access-Control-Allow-Origin error?

Question

I'm struggling to understand why this request is giving me a CORS error. I believe I have both the server and client setup to consume the endpoint properly. I can make the same request with postman and it works, so I think there is something I'm doing wrong with JS. The server is using Fastapi, a python framework. The client is Vue but the request uses Axios (which is Javascript). Any insight would be appreciated.

Server Settings

app = FastAPI(title="OptionStrats",
    description="For fun fin-trial",
    version="0.0.1",)

origins = ["*", "http://localhost:8080/"]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

Client Request

axios({
  method: "post",
  url: "http://optionstrats.com/backtest",
  headers: {
    common: {
      "Accept": "application/json",
      "Content-Type": "application/x-www-form-urlencoded"
    },
    "Access-Control-Allow-Origin": "*"
  },
  data: request_dict,
  crossDomain: true
})
.then(response => {
  console.log("backtest response", response);
})
.catch(error => {
  console.log(error);
});

Logs

Starting Request 
Object { url: "http://optionstrats.com/backtest", method: "post", data: {…}, headers: {…}, transformRequest: (1) […], transformResponse: (1) […], timeout: 0, adapter: xhrAdapter()
, xsrfCookieName: "XSRF-TOKEN", xsrfHeaderName: "X-XSRF-TOKEN", … }
Backtest.vue:464
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://optionstrats.com/backtest. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

Error: "Network Error"
createError createError.js:16
handleError xhr.js:81

I'm explicitly including Access-Control-Allow-Origin in the axios request headers but it seems to not be understood. What am I doing wrong? Thanks.

the error shows that you are trying to access http://optionstrats.com/backtest not http://localhost:8080 — ROOT, Jan 23 '20 at 09:46
_“I'm explicitly including Access-Control-Allow-Origin in the axios request headers but it seems to not be understood.”_ - CORS does not seem to be understood so far - by _you_. This is a header that needs to be set in the _response_; sending it with the _request_ makes zero sense to begin with. — 04FS, Jan 23 '20 at 09:52
Ok thanks. Yea I misunderstood what it was asking of me. I'll try correcting it this way. — neogeek23, Jan 23 '20 at 10:42

M.R.Safari · Answer 1 · 2020-01-23T10:06:50.880

The error you mentioned is a server side error and cannot be fix in client side. it's a header value which comes from the server response.

Access control is a security technique that can be used to regulate who or what can view or use resources in a computing environment.

The header needs to be set on the server you are trying to access to allow you to do this.

Browsers send specific HTTP headers for cross-site requests initiated from within XMLHttpRequest or the Fetch API. They also expect to see specific HTTP headers sent back with cross-site responses. An overview of these headers, including sample JavaScript code that initiates requests and processes responses from the server, as well as a discussion of each header, can be found in the HTTP Access Control (CORS) article and should be read as a companion article to this one. This article covers processing Access Control Requests and formulating Access Control Responses in PHP. The target audience for this article are server programmers or administrators. Although the code samples shown here are in PHP, similar concepts apply for ASP.net, Perl, Python, Java, etc.; in general, these concepts can be applied to any server-side programming environment that processes HTTP requests and dynamically formulates HTTP responses.

enabling CORS in apache would be like

RewriteRule ^/api(.*)\.json$ /api$1.json [CORS=True]
Header set Access-Control-Allow-Origin "*" env=CORS
Header set Access-Control-Allow-Methods "GET" env=CORS
Header set Access-Control-Allow-Credentials "false" env=CORS

every language has it's own configuration. so you can search about "how to enable cors in web api" or any other language.

For enabling CORS in FastAPI try to look at this document:

https://github.com/tiangolo/full-stack-fastapi-postgresql/blob/master/%7B%7Bcookiecutter.project_slug%7D%7D/backend/app/app/main.py#L20-L26

Why is this endpoint getting a Access-Control-Allow-Origin error?

1 Answers1