Cross-domain (JSONP cors)

Homologous strategy It is a well-known security strategy presented by Netscape.

Browser execution JS, will check which page it belongs to, if not the same-Origin page, will not be executed.

Because of the browser's homologous policy, a cross-domain is required whenever the sending request URL differs from the page address. As long as the protocol, domain name, port any one different, is a different domain. Common solutions are: JSONP cross-domain resource sharing (CORS) using HTML5 window.postmessage by modifying document.domain using Window.name 1.JSONPThe JSONP full name is JSON with Padding, which is a solution for cross-domain request resources, and is a kind of unofficial cross-domain data interaction protocol created by developersUsing the <script> tag can link to different sources of JS script, came to the goal of cross-domain. (JS script, CSS style, picture can be different from its own page source.) ）

  <!--JS file will execute the function we specified in the URL parameter    and will pass in the JSON data we need as a parameter. So JSONP is the server side of the page to do the corresponding match.    --<script type= "text/javascript" >        function Callback (jsondata) {            console.log (jsondata);        }    </script>    <script src= "Http://localhost:5000/api/test/get/callback?callback=callback" ></ Script>

Implemented through Ajax calls

Advantages: Can be implemented cross-domain, good compatibility, callback function local processing? Cons: Get only support, need to add callback processing on server side, error, no status code. The 2.CORS cross-domain resource sharing (CORS) mechanism allows the WEB application server to perform cross-domain access control, allowing cross-domain data transfer to be secured. Browser support in the API container (e.g. XMLHttpRequestor Fetch) uses CORS to reduce the risk of cross-domain HTTP requests.

Cross-domain resource sharing standards (Cross-origin sharing standard) allow cross-domain HTTP requests to be used in the following scenarios:

• XMLHttpRequestcross-domain HTTP requests initiated by or Fetch, as mentioned earlier.
• Web fonts (in CSS, by  @font-face  using cross-domain font resources), Web sites can publish TrueType font resources and allow only authorized sites to make cross-site calls.
• WebGL Map
• Use to drawImage draw the images/video screen to canvas
• Style sheet (using CSSOM)
• Scripts (Unhandled exception)

It needs to be set on the server side to. Netcore as an example:

public void Configureservices (iservicecollection services)        {            services. Addmvc ();            Services. Addcors (options = options. Addpolicy ("Allowdomain",            builder =            {                Builder. Withorigins ("*"). Allowanymethod (). Allowanyheader ();            }));        }        This method gets called by the runtime. Use this method to configure the HTTP request pipeline.        public void Configure (Iapplicationbuilder app, Ihostingenvironment env, iloggerfactory loggerfactory)        {             app . Usecors ("Allowdomain");            Loggerfactory.addconsole (Configuration.getsection ("Logging"));            Loggerfactory.adddebug ();            App. Usemvc ();        }

1. Simple Request

Use Get,head,post (Content-type to Text/plain multipart/form-data application/x-www-form-urlencoded)

The request process is as

Code:

  $ ("#simplebtnpost"). On ("click", Function () {                $.ajax ({                    type: "Post",                    data:{name: ' 1111 '},                    URL: "http ://localhost:5000/api/test/post ",                    success:function (datas) {                        $ (' ul '). empty ();                        $.each (datas, function (Element) {                            $ (' ul '). Append ("<li>" + datas[element] + "</li>");                        }                });            })

2. Preflight requests

Unlike the preceding simple request, a request for preflight requires that a preflight request must first be OPTIONS initiated with a method to the server to see if the server is allowing the actual request. The use of Preflight requests avoids the unintended impact of cross-domain requests on the server's user data.

A preflight request should be sent first when the request satisfies any of the following conditions:

• Use any of the following HTTP methods:PUT；DELETE；CONNECT；OPTIONS；TRACE；PATCH
• An artificially set header field other than the first field collection for CORS security. The collection is: Accept； Accept-Language； Content-Language； Content-Type (but note the additional requirements below);DPR；Downlink；Save-Data；Viewport-Width；Width
• Content-Typethe value does not fall into one of the following:;application/x-www-form-urlencoded；multipart/form-data；text/plain

Request Process:

Code:

            $ ("#btnput"). On ("click", Function () {                $.ajax ({                    type: "Put",                    URL: "Http://localhost:5000/api/test/put",                    data: {                        name: ' Test ',                    },                    DataType: "JSON",                    ContentType: "Application/json",                    beforesend: function (Request) {                        Request.setrequestheader ("Content-type",                            "Application/json; Charset=utf-8");                    } ,                    success:function (datas) {                        $ (' ul '). empty ();                        $.each (datas, function (Element) {                            $ (' ul '). Append ("<li>" + datas[element] + "</li>");                        }                });            })

Access-control-allow-origin

The response header can carry aAccess-Control-Allow-Origin 字段，其语法如下:

Access-Control-Allow-Origin: <origin> | *

Access-control-allow-methods

Access-Control-Allow-MethodsThe header field is used for the response of the preflight request. It indicates the HTTP method that is allowed for the actual request.

Access-Control-Allow-Methods: <method>[, <method>]*

Access-control-allow-headers

Access-Control-Allow-HeadersThe header field is used for the response of the preflight request. It indicates which header fields are allowed in the actual request.

Access-Control-Allow-Headers: <field-name>[, <field-name>]*

Access-control-allow-credentials

Access-Control-Allow-CredentialsThe header field is used for the response of the preflight request, indicating whether the server allows the credentials flag to be set to true.

Credentials can be a cookie, authorization headers or TLS client certificates.

Access-Control-Allow-Credentials: true

Access-control-expose-headers

Access-Control-Expose-HeadersThe header field specifies the set of header fields allowed on the server side. (the default is the following six simple response headers (response headers): Cache-control,

CONTENT-LANGUAGE,CONTENT-TYPE,EXPIRES,LAST-MODIFIED,PRAGMA)

Access-Control-Expose-Headers: X-My-Custom-Header, X-Another-Custom-Header

Cross-domain (JSONP cors)