Same Origin Policy
Homologous
Same protocol + same domain name + same port
content
When the browser page sends ajax request resources to servers of different origins, the response data will be intercepted by the browser
significance
For security reasons, prevent malicious access to data
solution
JSONP
Instead of using ajax requests, replace them with script tags that are not controlled by the same-origin policy
shortcoming
- only supports get
uncommonly used
Node forward proxy
Make use of the feature that the server request does not cross domains, so that the interface is in the same domain as the current site.
Browser page requests are sent to the node proxy server of the same origin, forwarded to different servers according to the content of the request, and then forwarded to the browser
eg Vue-cli 3.x
// vue.config.js 如果没有就新建
module.exports = {
devServer: {
port: 8000,
proxy: {
"/api": {
target: "http://localhost:8080"
}
}
}
};
Nginx reverse proxy
Browser page requests are sent to the nginx proxy server of the same origin, forwarded to different servers according to the content of the request, and then forwarded to the browser
server {
listen 80;
server_name local.test;
location /api {
proxy_pass http://localhost:8080;
}
location / {
proxy_pass http://localhost:8000;
}
}
shortcoming
- Not flexible enough, the front-end and back-end personnel need to negotiate the request path
CORS
The backend adds a whitelist of browser page ip. After the browser obtains the http response header, it judges whether the page ip is in the whitelist, and decides whether to intercept the response data. Cross-Origin Resource Sharing (
CORS) - HTTP | MDN (mozilla.org)
Labels in springboot @CrossOrigincan be configured
websocket
Without the http header, it is not restricted by the same-origin policy