Cross domain? Just install a plugin!

Browsers have introduced the same-origin policy for security, which directly results in limited functionality if the front-end and back-end domain names are different by default. With the development of front-end and back-end separation and separation of front-end and back-end responsibilities, the front-end will have a dedicated local development server (local dev server) for local development. At this time, it is likely to encounter cross-domain security problems when debugging with the back-end interface.

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

Previously, my solution was to solve it through a local proxy (service such as node or nginx). The basic idea is to add the following content 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 more convenient tools: browser extensions. Then the cross-domain problem can be gone forever.

At the beginning, I used a plug-in Allow CORS: Access-Control-Allow-Origin that specifically adds cross-domain headers to requests, address: https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf/related?hl= en-US .

This plugin is very simple to use, just click to toggle the on and off states. When on, it will automatically add cross-domain functionality to the request header, and off is equivalent to disabling the plugin.

Later I found that some headers of this plugin will not be added, such as access-control-expose-headers.

Therefore, a general-purpose plugin that adds header information to the request is necessary. So I chose requestly

The fly in the ointment is that each rule can only change one head for free. But the good news is that you can create multiple rules, and change each rule by one head and you can be free.

Address: https://app.requestly.io

requestly can not only add cross-domain request headers, but theoretically can make arbitrary modifications to requests and responses. Therefore, it is possible to use it as a mock, uniformly add parameters, etc.

Based on this, the use of browser extensions can completely solve the cross-domain problems encountered when the front-end is developed locally.