React project two ways to solve cross-domain

Recently, I was studying the relevant knowledge of http and I saw problems about cross-domain. I usually hear cross-domain issues all the time in my work, so I will study it in depth, and record it here for future reference.

1. Why is there cross-domain?

The browser follows the same-origin policy ( scheme(协议), host(主机)andport(端口) are the same for both 同源).

Non-homologous sites have such limitations:

• Can't read and modify the other party's DOM
• Do not read the other party's cookies, IndexDB and LocalStorage
• Limit XMLHttpRequest requests. (The following topics focus on this)

When the browser sends an Ajax request to the target URl, as long as the current URL and the target URL have different sources, cross-domain is generated, which is called 跨域请求.

2. Solution

• JSONP
• CORS (cross-domain resource sharing)
• Nginx

Here is a brief introduction to the first two methods:

[1] JSONP ( reference article )

JSONP is a common method for cross-origin communication between server and client. The biggest feature is simple and applicable, good compatibility (compatible with low-level IE), the disadvantage is that it only supports get requests, not post requests.

In HTML tags, some tags, such as script and img, do not have cross-domain restrictions on tags for obtaining resources.

The core idea: The web page <script>元素requests JSON data from the server by adding one . After the server receives the request, the data is placed back in the parameter position of a callback function with a specified name.

[2] CORS ( reference article )

• Common cross-domain request: only need to set Access-Control-Allow-Origin on the server side
• Cross-domain request with cookies: both front and back ends need to be set

This article mainly introduces the solutions in the React project: proxy and ngnix.

3、proxy

Using proxy configuration in the package.json file can solve cross-domain issues.

 "proxy":{
    "/api":{
       "target":"http://xxx.xxx.com",
       "changeOrigin": true,
       "pathRewrite": {
        "^/api": ""
    }
     }
 }

• target: Domain name of the interface
• changeOrigin: Turn on the proxy
• pathRewrite: You can see that I used /apito match the domain name of the requested interface, and the interface name is /admin/login, so it should be written in the actual request /api/admin/login, but the address I actually requested is not api prefixed, so I need to rewrite the address through pathRewrite The prefix is ​​removed when requested.

4、nginx

The above method can solve the cross-domain problem of the development environment in our React project, but it cannot solve the cross-domain problem in the production environment (occasionally encountered).

1. Mac install nginx and ⚠️ Note: Please see the next article
2. Features:

•  http server, can provide http service independently;
• Virtual host: multiple domain names point to the same server, and the server forwards the request to different application servers according to different domain names;
• Reverse proxy: load balancing, forwarding requests to different servers

      3. Default configuration file

    location / { 
        root html; 
        #file root directory index index.html index.htm; #default start page 
    }

      4. Modify the configuration file

location / { 
            root    / Users / zhangsan / Documents / test / build; 
            #Directly point to the packaged file
             index index.html index.htm; 
        } 

 location / api { rewrite ^. + api /?(.*)$ / $ 1 break ; 
            proxy_pass http: // XX.XXX.com; # proxy address to api 
        }