The front cross domain is a cliche topic, skills essential to the front, a dime online related introduction and solution shaoxing, the author is limited to learning also could not speak too deep insights, therefore this article only records a post request to solve the cross-domain xiaowen, if we can help meet the same problem friend, it is also very good. Any errors or omissions are welcome.

I. Background introduction

I wrote a vue imitation cat’s Eye movie personal training small project, using cat’s Eye ONLINE API interface, there was no problem when using local agent development, after deployment online, in order to solve the cross-domain problem, I used Nginx reverse proxy to forward requests to cat’s eye API, most of the interfaces are ok. However, there was a post request interface blocked by the browser, as shown in the picture below, the red result is wrong (the online bug has been fixed, no screenshot was saved at that time, the picture below is the local simulation bug).

The conventional solution to this, of course, is to type in the question, Google it, and search through a bunch of search results for the solution you’re looking for. If Google came up with a solution right away, of course it won’t, nor would the author write this article.

Two. Solution

The process is tortuous, with this article, then of course the result is a perfect solution.

1. Preliminary understanding

The pre-request does not pass the control access check. The pre-request does not allow redirection.

Keywords Preflight request

I didn’t know what to do about it, and of course the process of fixing the bug is also a learning process, so I went to the documentation to find out what preflight Request was.

2. Find documents

Redirect CORS cross-domain requests

Why are cross-domain POST requests differentiated into simple and non-simple requests and content-type related?

Front end | discuss preflight request is simple to find the book for preflight request of popular science document, interested friends can go and see, thanks to the author of this article.

Read the front end of the above mentioned | discuss preflight request, for such bug, I try to extract a few key points

2.1 Why to send the pre-check request

Preflight Request is a precheck request made by the browser to ensure that the server is not allowed to make HTTP requests that have adverse effects on server data. If the request is allowed, the browser will send a real request. If not, the browser will reject the real request.

2.2 First, the method that does not trigger the precheck request is introduced

  • GET
  • HEAD
  • POST

    This is a simple requirement only if the POST method’s content-Type value is equal to one of the following

    • text/plain
    • multipart/form-data
    • application/x-www-form-urlencoded

2.3 Method of triggering precheck request

For the sake of simplicity, we will assume that in all cases except those listed above, OPTIONS will be pre-sent to pre-request.

Preflight Request redirection is not allowed

Get post head Options are also sent when the header has a custom attribute. See the end of this article

Three. Try to solve

The preflight request returned a redirection status code of 302. The preflight request returned a redirection status code of 302. The preflight request returned a redirect status code of 302. Because we’re using axios here, and the default post method for Axios is Content-Type, application/json; charset=utf-8; So the key to avoid post triggering the pre-check request is to use any of the three values of the above content-Type, Application/X-www-form-urlencoded is the biggest nerd.

At this point, almost also solved, rao so large circle, just need to modify a line of configuration parameters, is there a kind of want to hit the wall feeling? The first time I write a paper, I feel the word is poor, thoughtless or need to supplement the place, welcome to put forward to discuss.

Postscript added

1. The @Cherry bombGet post head Options are also sent if the header has a custom attribute

In the spirit of realism, I tested and customized the attribute ‘X-GET-Prefilght_test ‘:’ Check preflight by Customize Headers Attributes’, and got the new pose exactly as @Wrestler said, thanks. The error message and request first-class information are as follows: