Nginx solves the cross-domain problem between Vue and Laravel

Front-end JS cross-domain can be said to be a very old problem. A search on the Internet will come up with a lot of them, all of them, but most of them involve space;

After tossing for a lot of time, this problem was finally solved, now let's record.

The following is to configure Nginx to solve the cross-domain problem between Vue and Laravel;

Example (this is an example domain name, don’t pay too much attention to it, other content is real and can solve the problem):
Front-end Vue domain name: http://www.sample.cn

Back-end service domain name: http://api.sample.cn

 

Problem situation (the problem situation in the front-end, I am here http://www.sample.cn):

The following is the error content that appears in the browser by pressing F12;

Access to XMLHttpRequest at 'http://api.sample.cn/api/test' from origin 'http://www.sample.cn' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

 

Problem solving : (Note: It is the Nginx configuration of the back-end service, I am here http://api.sample.cn)

server {

    listen 80;
    server_name api.sample.cn;

    root /sample/api;
    index index.php;

    add_header Content-