Front-end development often involves cross-domain problems, of which there are many solutions:
1.jsonp requires the target server to cooperate with a callback function.
2.window.name+iframe requires the target server to respond to window.name.
3.window.location.hash+iframe also needs to be processed by the target server.
4.html5's postMessage+ifrme This also requires the target server or the target page to write a postMessage, mainly focusing on front-end communication.
5. CORS requires the server to set the header:Access-Control-Allow-Origin。
6. The method of nginx reverse proxy is rarely mentioned, but it can be used without the cooperation of the target server, but you need to build a transit nginx server to forward requests.
Personally I think 6 is the correct solution. Here is an introduction to how to use nginx to do cross-domain
Since I use MAC, the following commands are all in the MAC environment. If you need windows, you can convert them synchronously.
1. nginx installation
Install nginx via homeBrew
Command line: brew install nginx After the installation is complete,
Enter nginx -v and the version number appears, then the installation is successful (how to install homebrew will not be described)
2. Modify the configuration file of nginx
File name: nginx.conf path /usr/local/etc/nginx/nginx.conf
This is the simplest configuration
The following code can directly copy the full coverage nginx.conf file.
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
listen 805 ; #Open and start port 805, the original file is port 8080, because port 8080 is used in many places, so it is changed to 805 here
server_name localhost ; #The domain name of the current service
access_log on;
access_log logs/host.access.log;
location / {
#8080 port number is the local service port number opened in the first step
proxy_pass http://localhost:8080;
}
location /uc {
#uc is the address of the corresponding ajax request, all requests under uc will be rewritten to http://qa.cx-psi.wmdev2.lsh123.com/ to make requests, and cross-domain can be achieved
rewrite ^/(.*)$ /$1 break;
proxy_pass http://qa.cx-psi.wmdev2.lsh123.com/;
}
location /basic {
#Every time there is a new proxy requirement, add a new location, same as above
#Reverse proxy, to achieve the purpose of separating the front-end and back-end development
rewrite ^/(.*)$ /$1 break;
# include uwsgi_params;
proxy_pass http://qa.cx-psi.wmdev2.lsh123.com/;
}
}
include servers/*;
}
3. Cross-domain steps
1. After completing the modification of the nginx configuration file,
First start the local service, whether it is gulp, webpack, fis3, it will run a local service, and the access address is 8080
As shown in the figure: The access address here is IP: 8080 or localhost:8080 to access
Obviously, it can be seen that all cross-domain embracing red.
At this time, start the nginx service, and after the startup is successful, access the localhost:805 port to achieve cross-domain
Once again with the picture explanation, here the basic location /basic is manually configured by itself, which refers to the requested path.
That is, each different interface path needs to be configured once. The proxy_pass corresponds to the target backend server domain name
location /basic {
#Every time there is a new proxy requirement, add a new location
#Reverse proxy, to achieve the purpose of separating the front-end and back-end development
rewrite ^/(.*)$ /$1 break;
# include uwsgi_params;
proxy_pass http://qa.cx-psi.wmdev2.lsh123.com/;
}
is not very simple wow. Give it a try!
Ps: Commands that may be needed