Popular cross domain

Front end development front-end and back-end separation projects , You will often encounter cross domain （Cross-Origin） The problem of , Why is there a cross domain ？ How to solve cross domain ？ And what are the most common methods ？

what
The full name of cross domain is cross domain resource sharing
scene ： When you request the interface address and the domain where the front-end file service is located （ Requested agreement ,ip And port ） At different times , You're going to report a mistake , Here's the picture

why
The cross domain problem is actually caused by the same origin strategy of the browser , The same origin policy is the protection mechanism of the browser , Only web pages are allowed to request services under the same domain name .
The requirements of the same origin strategy are 3 Same as ： agreement , The domain name and port should be consistent

how

【 Configure the backend 】CORS

Whether the browser enables the cross domain protection mechanism will respond according to the backend configuration , So the server needs to make a cross domain configuration

How to configure ：
Modify the response header of the interface ：Access-Control-Allow-Origin, The value is *,, If the browser passes the judgment, it will allow cross domain

【 Configure intermediate server 】 Reverse proxy

It means to use a proxy server to send requests on behalf of the real server

【 Configure intermediate server 】 Forward agency

This means that a proxy server is used to send requests on behalf of clients , Generally, the browser is used as the proxy server , This is directly in webpack It's equipped with

JSONP【 Not recommended 】

Actually by script The characteristics of the label （ No cross domain restrictions ） To achieve cross domain , Server side cooperation is also required , And can only use get Method , There are security risks , Not recommended