Zaiyu CORS - custom HTTP header results in cross-domain

signpost

Well, cross-domain back-end configuration, but the front end in the HTTP header to add token, and generate cross-domain issues
Flask, Vue (Axios), the cross-domain

Applicable scene

Before and after the end of the separation, want to use the token to manage login status, or call back Interface

surroundings

Platform-independent

Reference blog

After axios configuration token in the header information, the request will be reported to the rear cross-domain problems. But when a postman test without any problems.

In fact, there is no answer to this question is given to help immediacy, even the strange answer, but opens the door for me.

background

For a variety of reasons, abandoned the use of ready-made blog similar to WordPress this solution, prepare yourself to build a blog system, technology selection is: backend: Flask, front-end: Vue. Log in state management to abandon cookie, using token. CORS problem appeared to be the route to protect the development of the specific situation Vue is obtained from the background added to the token header HTTP request, call the appropriate interfaces across domains appears.

Before the cross-domain has actually appeared in Flask by flask_cors configured cross-domain solution, so cross-domain generation is making me very puzzled, and because the problem is rather strange not found a good solution in search engines (may be I do not know how to describe, he found them not), so it can re-examine their own cross-domain, there are some new harvest.

analysis

I believe the use of front and rear end of the separation of the developer in the early stage of development will run into the problem of cross-domain, there are many cross-domain solution, I chose to be resolved through the background.

Cross-domain browser issue same-origin policy caused many Internet-related articles, not be repeated here. Note that: postman no cross-domain.

Flask solve cross-domain solution is very simple, the following code to complete.

from flask_cors import CORS
CORS(app,supports_credentials=True

@app.after_request
def after_request(resp):
    resp = make_response(resp)
    resp.headers['Access-Control-Allow-Origin'] = 'http://127.0.0.1:8080'
    resp.headers['Access-Control-Allow-Methods'] = 'GET,POST'
    resp.headers['Access-Control-Allow-Headers'] = 'x-requested-with,content-type'
    return resp

Once configured, it has not had no problems, so it did not go further understand the meaning of its configuration until this time it was stuck, so I had to find out what my cross-domain configuration something?

In fact, the key point of this problem lies in that three configurations: Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers.
They in the end What is the meaning?

First of all Access-Control-Allow-Origin, literally, this configuration allows the corresponding source to access back-end resources, mostly in the online writing here is *, that allows all sources, this is not safe, because I am here is local development phase, Vue the start port is 8080, so I wrote that http://127.0.0.1:8080, according to your development needs into triples to their needs.

Secondly Access-Control-Allow-Methods, also literally, to allow use of the HTTP Method which, GET, POST is the most common, where only wrote two, if you need to use another Method, here to write in, or will be cross-domain problems.

More than two configurations are no problem, the problem in the last part:

Access-Control-Allow-HeadersAnd two above, the literal meaning, the reason is she a problem, because we add a field to the HTTP request a custom front end token, but this is not within the scope of the license (permission only x-requested-withand content-type) are therefore in order to determine the source policy does not match the contract illegal request, so we only need to customize the header can be added to it. The answer has come out.

Continue to dig a bit, what are two meanings of this field is? x-requested-with, content-type.

x-requested-withIt is used to determine a client request is initiated by the Ajax, and so Axios What is the relationship? The answer is: it does not matter ... it can be directly deleted. Paste this code is the default person or initiation request using Ajax, but no analysis or field meaning, so it is directly attached to the code, but for developers using the Axios, this field is not inevitable.

content-type: Specified data format, and encoding the POST request. The most common data format than the josn, the following form: application/jsonprinted out at the rear end of the POST request HTTP Header, will find this and the following data.

Content-Type: application/json;charset=UTF-8

solution

In the Access-Control-Allow-Headersheader add a custom name on the whole as follows:

from flask_cors import CORS
CORS(app,supports_credentials=True

@app.after_request
def after_request(resp):
    resp = make_response(resp)
    resp.headers['Access-Control-Allow-Origin'] = 'http://127.0.0.1:8080'
    resp.headers['Access-Control-Allow-Methods'] = 'GET,POST'
    resp.headers['Access-Control-Allow-Headers'] = 'content-type,token'
    return resp

In fact, direct delete Access-Control-Allow-Headersthis configuration can solve the problem, but to enumerate all the fixed situation is certainly safer.

####
For more Haytham original articles, please pay attention to the public number "Xuju Long":
My micro-channel public number