Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "how to solve cross-domain problems in react project". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "how to solve cross-domain problems in react project" can help you solve the problem.

one。 Why is there cross-domain?

Because our browsers follow the same origin policy (scheme (protocol), host (host), and port (port) are all called homologous. Where there is homology, there is non-homology, so there are the following restrictions in non-homology: do not read and modify each other's DOM, do not read and access each other's Cookie, IndexDB and LocalStorage, and restrict XMLHttpRequest requests. And when the browser sends an Ajax request to the target path, as long as our current path and the target path are different from the source, there will be a cross-domain request, also known as a cross-domain request.

two。 Solution method

1.JSONP

Jsonp is a common method of cross-source communication between server and client, which has the characteristics of simple application and good compatibility, but it has a disadvantage that it only supports get requests but not post requests. However, there are some tags in HTML that have no cross-domain restrictions, such as script and img. The way to use this is by adding one to the web page, and then requesting json data from the server, and when the server receives the request, the data will be passed back in a specified name through the parameter location of the callback function.

2.CORS

There are normal cross-domain requests and cross-domain requests with cookie in this method. In normal cross-domain requests: we only need to set Access-Control-Allow-Origin on the server side

However, in cross-domain requests with cookie: both the front and back ends need to be set (frontend setting: to determine whether there is a cookie based on the xhr.withCredentials field).

3.proxy

In this way, we can use proxy configuration in the package.json file to solve the cross-domain problem. The code is as follows:

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

Target in the code refers to the domain name of the interface; changeorigin refers to enabling the proxy; in the case of pathRewrite, you can see that I used / api to match the domain name of the request interface, and the interface name is / admin/login, so it should be written as / api/admin/login in the actual request, but the address I actually requested does not have an api prefix, so I need to rewrite the address through pathRewrite to remove the prefix when the interface is requested.

4.Nginx

The above approach can solve many of our cross-domain problems in development, but not in the production environment. This method has several functions: http server (can provide http service independently), virtual host (multiple domain names can point to the same server, and the server forwards requests to different application servers according to different domain names), and direction proxy (load balancing, forwarding requests to different servers).

This is the end of the introduction to "how to solve cross-domain problems in the react project". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.