What is cross domain?
Same-origin policy
The same-origin policy is an important concept in the web application security model. Under this strategy, the browser allows the script contained in the first web page to fetch data from the second web page, provided that the two web pages are under the same origin.
Same Origin: Requires the same URI, hostname, and port.
This strategy prevents malicious scripts on one web page from obtaining sensitive data on other web pages through the DOM.
One thing to keep in mind is that the same-origin policy only applies to scripts, which means that things like images, css and other dynamically loaded scripts can access resources across domains via the corresponding tags.
CORS
Cross-origin resource sharing (CORS) is a mechanism that uses additional HTTP headers to tell browsers that web applications running on one origin (domain) are allowed to access specified servers from different origins resource.
The meaning of CORS
For security, browsers restrict cross-origin HTTP requests made within scripts. For example, the XMLHttpRequest and Fetch APIs follow the same-origin policy. This means that web applications using these APIs can only request HTTP resources from the same domain from which the application is loaded, unless the response message contains the correct CORS response headers.
The Cross-Origin Resource Sharing (CORS) mechanism allows Web application servers to perform cross-origin access control, so that cross-origin data transmission can be performed securely.
After understanding the above content, we can solve the cross-domain problem of the browser console. Generally, there are two directions:
- Backend service settings allow cross-domain access
- The front end accesses resources through a proxy
Server
Taking koa, a framework for Node.js as an example, it is very simple to use koa-cors across domains, as follows:
var koa = require('koa');
var route = require('koa-route');
var cors = require('koa-cors');
var app = koa();
app.use(cors());
app.use(route.get('/', function() {
this.body = { msg: 'Hello World!' };
}));
app.listen(3000);
This middleware roughly does something like this:
module.exports = () => {
return async function(ctx, next) {
ctx.set('Content-Type', 'application/json');
ctx.set('Access-Control-Allow-Origin', '*');
ctx.set('Access-Control-Allow-Methods', 'GET, POST, PATCH, DELETE, PUT');
ctx.set('Access-Control-Allow-Headers', 'X-Requested-With, content-type, X-Authorization, X-uuid');
ctx.json = json.bind(ctx);
ctx.halt = halt.bind(ctx);
try {
await next();
} catch (e) {
return ctx.halt(e.code, e.message);
}
};
};
The response received by the front end will look like this:
HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 00:23:53 GMT
Server: Apache/2
Access-Control-Allow-Origin: *
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: application/xml
In this example, the Access-Control-Allow-Origin: * returned by the server indicates that the resource can be accessed by any external domain.
Front-end proxy
If webpack is used, it is easy to configure a proxy, which simulates the request of the same origin as the server through the proxy.
//webpack.config.js
module.exports = {
//...
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000',
pathRewrite: { '^/api': '' },
},
},
},
};
In this way, the request initiated by the front end contains the path of /api will be proxied to http://localhost:3000 , and /api will be replaced with empty. If your interface address already includes /api, just remove pathRewrite: { '^/api': '' }.
For more advanced functions, please refer to the official website
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。