Cross-domain
When the browser to access non-homologous URLs will be limited access, cross-domain problems arise.
solution:
1. the Response to add header (CORS)
2. JSONP way
3. The global object + iframe
(1) document.domain + iframe provided (only to use this method at the same time the primary domain):
You can access the same set document.domain value
(2)HTML5的postMessage(window.postMessage):
Monitor message incidents, obtain data
(3) using the cross-domain window.name to:
Data Sources page is assigned to window.name, modify it with src homology page request page (window.name unchanged), the requested page is homologous to get window.name page (data)
4. proxy (Proxy)
principle
Server Access server does not have cross-domain problem. So, our approach is to use the middle of the proxy browser sent a request to the target browser.
Proxy configuration mode
1.http-proxy-middleware
As follows: use express node.js framework which creates a server, the server sends a request to the target
1 // reference relies 2 var Express = the require ( 'Express' ); . 3 var Proxy = the require ( 'HTTP-Proxy-Middleware' ); . 4 . 5 // Proxy middleware options . 6 var Options = { . 7 target: 'http://www.example.org', // target server Host . 8 changeOrigin: to true , // default false, whether a change in the original host header target the URL . 9 WS: to true , // whether the agent WebSockets 10 pathRewrite: { . 11 '^ / api / Old-path': '/ api / new new-path', // rewrite request, such as access to the source of our api / old-path, then the request will be resolved as / API / new new-path 12 is '^ / API / Remove / path': '/ path' // ibid 13 }, 14 Router: { 15 // if the requesting host == 'dev.localhost: 3000', 16 // rewrite target server 'http://www.example.org' is 'http: // localhost: 8000' 17 'dev.localhost:3000' : 'http://localhost:8000' 18 } 19 }; 20 21 // create proxy 22 var exampleProxy = Proxy (Options); 23 24 // Use proxy 25 var App = Express (); 26 is app.use ( ' / API ' , exampleProxy); // Note that here the "/ api" is not to be written "/ api", but in accordance with your request the path to write 27 app.listen (3000);
2.webpack vue-cli or the like devSever
Also using node.js create a local proxy server, but slightly different configuration, more concise. Webpack.config.js configuration with an example
devserver: {
proxyTable: { // higher version is "Proxy" // When you request is based on the interface / api beginning, then I can help you proxy access to https://api.douban.com '/ api / *' : { target: 'https://api.douban.com', // domain name you interface Secure: false , // If https interface, you need to configure the parameters changeOrigin: to true , // if the interface cross-domain, the need for this parameter configuration
pathRewrite: {
'^ / API / Old-path': '/ api / new-path', // rewrite request, such as our source access is api / old-path, then the request will be resolved to / api / new -path
'^ / API / Remove / path': '/ path' // supra }
} }
}
3.nginx agent
In a nutshell it is to create a server using c language, and the above two is not the same.
4.whistle and other debugging tools
Also based on the node to achieve, complex functions, simple operation.
to sum up:
. Cross-domain of the main ways is to use a proxy server requests to the server to get around the way to achieve cross-domain issues about the process: Browser ===> Proxy ===> target server.
The main means of two types: 1. code in the project implementation, using the node to create a server because of the code, so even if the project is not running on this machine can achieve cross-domain.
2. tools above-mentioned tools are created manually in a local server, and then run the code. So when the code will not run locally or across domains, you want to reconfigure. Cross-domain tool is more suitable for debugging.