Cross domain

Again: cross-domain is browser behavior, not server behavior.

In fact, the request has already arrived at the server, only to be restricted by the browser on its way back. Just as Python is capable of fetching data, it is possible to retrieve data by making a request without going through a browser. The idea is to solve cross-domain problems through Nginx’s reverse proxy.

The agent

A proxy is a proxy server that stands between us and the real server through which all of our requests are forwarded.

Forward agent

Forward proxy means that we cannot access Google, but I have a VPS in a foreign country, it can access Google, I visit it, ask it to visit Google, send the data to me.

The reverse proxy

Everyone had such experiences, call 10086 customer service phone, may be a region of 10086 customer service has several or dozens of, you never need to care about what is at the other end of, call what, male, or a woman, beautiful or handsome, you don't care, you care about your problem can get a professional solution, All you have to do is dial the switchboard number 10086, and someone will always answer you, sometimes slowly, sometimes quickly. So the switchboard number 10086 here is what we call a reverse proxy. The customer doesn't know who is actually providing the service.

The reverse proxy hides the real server. When we request www.baidu.com, it's just like dialing 10086. There may be thousands of servers serving us, but you don't know which one it is, and you don't need to know. www.baidu.com is our reverse proxy server, which forwards requests to the real server for us. Nginx is a very good reverse proxy server for load balancing.

conclusion

The forward proxy hides the real client

The reverse proxy hides the real server

Nginx is a good reverse proxy server, and Apache can do the same.

Nginx

Nginx (pronounced engine X) is a Web server that can also be used as a reverse proxy, load balancer, and HTTP cache. The software was created by Igor Sysoev and was first publicly released in 2004. The eponymous company was set up in 2011 to provide support.

Nginx reverse proxy module proxy_pass

Proxy_pass is followed by a URL to reverse proxy the request to the server specified by the URL parameter. For example, proxy_pass api.shanbay.com in our example above would reverse proxy the matched request to api.shanbay.com.

Reverse proxy can be done by adding proxy_pass to your server IP address in the configuration file, such as the scallop server address here.

server { listen 80; server_name localhost; ## reverse proxy to https://api.shanbay.com location / {root HTML; index index.html index.htm; proxy_pass https://api.shanbay.com; }}Copy the code

Configure HTML to open as a file

General situation, our HTML files placed in Nginx server above, namely through http://localhost/index.html, but on the front end debug, We may be through the use of file:///E:/nginx/html/index.html to open HTML. The server is not particularly convenient to open.

And the reason why we want to deploy on the server, is to use the browser’s own CORS header to solve the cross-domain problem, if you do not want to put HTML in Nginx, and want to debug HTML through the local open way, you can add their own ACCESS-Control-Allow-Origin HTTP header, Nginx.conf must be configured with http://127.0.0.1/request instead of /request.

location / { root html; index index.html index.htm; $request_method = 'POST') {add_header 'access-control-allow-origin' *; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type'; } if ($request_method = 'GET') { add_header 'Access-Control-Allow-Origin' *; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type'; } # proxy to port 8080 proxy_pass http://127.0.0.1:8080; }Copy the code

Handle DELETE and PUT cross-domain requests

Now my background is a restful interface with delete and PUT methods, and the above configuration is useless.

DELETE and PUT cross-domain requests can be resolved by adding judgment to non-simple requests.

Non-simple requests are requests that have special requirements on the server, such as the request method being PUT or DELETE, or the content-Type field being of Type Application/JSON.

CORS requests that are not simple requests are preceded by an HTTP query request, called a “preflight” request.

After receiving the precheck Request, the server checks the Origin, access-Control-request-method, and access-Control-request-headers fields and confirms that cross-source requests are allowed, it can respond.

Therefore, in order for Nginx to handle non-simple requests such as DELETE, Nginx needs to change the configuration as follows:

If ($request_method = 'OPTIONS') {add_header access-control-allow-origin; add_header Access-Control-Allow-Credentials true; add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type'; return 204; $request_method = 'POST') {add_header 'access-control-allow-origin' *; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type'; } if ($request_method = 'GET') { add_header 'Access-Control-Allow-Origin' *; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type'; } root html; index index.html index.htm; # configuration HTML in Nginx open location ~ * \. (HTML | HTM) ${} proxy_pass http://127.0.0.1:8080; # agent to port 8080 }Copy the code

We also had to put our HTML code in an HTML folder in Nginx, using Nginx as our front-end server.

The URL rewrite

Sometimes we just want to reverse proxy urls under/API to the back end. We can configure url rewriting rules in nginx.conf as follows:

location / { root html; index index.html index.htm; location ^~ /api { rewrite ^/api/(.*)$ /$1 break; proxy_pass https://api.shanbay.com/; }}Copy the code

In this case, we only deal with urls under/API.

In the configuration file we rewrite the URL to the actual requested URL using rewrite and proxy proxy_pass to the real server IP or domain name.

Cookie

If the domain part of the Cookie does not match the domain name of the current page, it cannot be written. So if you ask www.a.com, the server proxy_pass to www.b.com domain name, and www.b.com outputs the Cookie of domian=b.com, the front-end page still stays on www.a.com. So the browser can’t write the Cookie.

Can be set in nginx reverse proxy:

Location / {# page address is a.com, but use b.com cookie proxy_cookie_domain b.com; Proxy_cookie_path / /; proxy_pass http://b.com; }Copy the code

conclusion

Nginx solves cross-domain problems by using Nginx reverse proxies to divert requests to the real server to the local server to avoid browser “same-origin policy restrictions”.