Cross domain? Just install a plug-in!

Time:2022-5-13

The browser introduces the same origin policy for security, which directly leads to the limitation of the function if the front and rear domain names are different by default. With the development of front-end and back-end separation and the separation of front-end and back-end responsibilities, the front-end will have special functionsLocal dev serverFor local development. At this time, cross domain security problems are likely to be encountered during joint debugging with the back-end interface.

This itself is a security policy of the browser, but it has an impact on the front-end development. How to solve it?

My previous solution was to use local agents (services such as node or nginx). The basic idea is to add the following contents to the request response header:

Access-Control-Allow-Origin: https://foo.example
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
Access-Control-Max-Age: 86400

Later, I used a more convenient tool: browser extension. Then cross domain problems can go away forever.

At the beginning, I used a plug-in to add cross domain headers to requestsAllow CORS: Access-Control-Allow-Origin, address:https://chrome.google.com/web…

Cross domain? Just install a plug-in!

This plug-in is very simple to use. Just click to switch the on and off states. When on, the cross domain function will be automatically added to the request header, and off is equivalent to disabling the plug-in.

Later, I found that some headers of this plug-in would not be added, such as access control expose headers.

So oneGeneral add header information to the requestPlug-ins are necessary. So I choserequestly

Cross domain? Just install a plug-in!

The fly in the ointment is that every rule can only be changed for freeOneHead. But the good news is that you can create multiple rules, and you can whore for nothing by changing the head of each rule.

Address:https://app.requestly.io

Requestly can not only add cross domain request headers, but also theoretically make arbitrary modifications to requests and responses. Therefore, it can be used for mock, unified addition of parameters and so on.

Based on this, using browser extension can completely solve the cross domain problem encountered by the front-end in local development.