current position:Home>Nginx direction agent solves cross domain Problems-2

Nginx direction agent solves cross domain Problems-2

2022-04-29 08:01:08zoobuzas


On the browser side Ajax Cross domain problems occur when requesting , So what is cross domain , How to solve cross domain ? Let's first look at the phenomenon of cross domain problems on the browser side , As shown in the figure below
 Insert picture description here

What is cross domain problem ?

Cross domain , It means that the browser can't execute scripts of other websites . It's caused by the browser's homology strategy , It 's the browser JavaScript Safety restrictions imposed .

What is homology ?

So homologous means , domain name , agreement , All ports are the same

  • --> Cross domain
  • --> Non cross domain
  • --> Cross domain
  • --> Cross domain

How to solve cross domain problems ?

Use CORS( Sharing across resources ) Solving cross domain problems

CORS It's a W3C standard , The full name is " Cross-domain resource sharing "(Cross-origin resource sharing). It allows the browser to cross to the source server , issue XMLHttpRequest request , To overcome AJAX A restriction that can only be used with the same origin .

CORS Requires both browser and server support . at present , All browsers support this feature ,IE The browser cannot be lower than IE10. Whole CORS Communication process , It's all done automatically by the browser , No user involvement is required . For developers ,CORS Correspondence and homology AJAX There is no difference in communication , The code is exactly the same . Once the browser finds AJAX Request cross source , Will automatically add some additional header information , Sometimes there is an additional request , But users don't feel . therefore , Realization CORS The key to communication is the server . As long as the server implements it CORS Interface , You can communicate across sources ( stay header Set in :Access-Control-Allow-Origin

Use JSONP Solving cross domain problems

JSONP(JSON with Padding) yes JSON A kind of “ Usage mode ”, It can be used to solve the problem of cross-domain data access in major browsers . Because of the homology strategy , Generally speaking, it is located in Can't communicate with Server communication , and HTML Of <script> Element is an exception . utilize <script> This open strategy of elements , Web pages can be dynamically generated from other sources JSON Information , And this usage pattern is called JSONP. use JSONP The information we got is not JSON, It's arbitrary JavaScript, use JavaScript The literal translator performs instead of using JSON Parser parsing ( The target server needs to cooperate with a callback function ).

CORS And JSONP Comparison

CORS And JSONP Is used for the same purpose , But compared to JSONP More powerful .

JSONP Only support GET request ,CORS Support all types HTTP request .JSONP Has the advantage of supporting older browsers , And can not support to CORS The website requests data .

Use Nginx Reverse proxy solves cross domain problems

The above solutions to cross domain problems require server support , When the server cannot set header Or provide callback We can use it when Nginx Reverse proxy to solve cross domain problems .

The following is the cross domain configuration scheme for file upload :

user  nginx;
worker_processes  1;

events {
    worker_connections  1024;

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;

    keepalive_timeout  65;

    server {
        listen 80;
        add_header 'Access-Control-Allow-Origin'  '*';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
        location / {
            if ($request_method = 'OPTIONS') {
                add_header Access-Control-Allow-Origin  *;
                add_header Access-Control-Allow-Headers X-Requested-With;
                add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,PATCH,OPTIONS;
                #  Solve the fake request problem , If it's a simple request, there's no problem , But here is the upload file , The first request is  OPTIONS  The way , The actual request is  POST  The way 
                # Provisional headers are shown.
                # Request header field Cache-Control is not allowed by Access-Control-Allow-Headers in preflight response.
                add_header Access-Control-Allow-Headers DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range;
                return 200;

copyright notice
author[zoobuzas],Please bring the original link to reprint, thank you.

Random recommended