Shulou(Shulou.com)06/01 Report--

This article mainly introduces the homology strategy in the browser and cross-domain example analysis, which has a certain reference value. Interested friends can refer to it. I hope you will learn a lot after reading this article. Let's take a look at it.

What is the homologous strategy of browsers and cross-domain?

Homologous strategy

Homologous strategy is a self-protective behavior of browsers. The so-called homology means that the protocol, domain name and port should all be the same.

Most of the content in the browser is restricted by the same origin policy, but the following three tags are not restricted:

Cross-domain

Cross-domain means that browsers cannot execute scripts under other domain names. It is restricted by the browser's homologous policy.

You may wonder whether the cross-domain request has been sent to the server or not.

In fact, a cross-domain request can be sent to the server, and the server can pass the accepted request and return the result normally, but the result is blocked by the browser.

Cross-domain solutions (list several commonly used ones)

JSONP

It mainly uses script tags that are not limited by the browser's same origin policy, and can get the data transferred from other sources, which needs the support of the server.

Advantages and disadvantages:

It has good compatibility and can be used to solve the problem of cross-domain data access in mainstream browsers. The disadvantage is that it only supports get requests, which is limited and insecure, and may be attacked by XSS.

Train of thought:

Declare a callback function with a function name (such as show) as a parameter value to be passed to the server that requests data across domains. The function parameter is to get the target data (the data returned by the server).

Create a tag, assign that cross-domain API data interface address to script's src, and pass the function name to the server in this address (you can pass the parameter:? callback=show through the question mark).

After receiving the request, the server needs to do special processing: concatenate the name of the passed function and the data it needs to give you into a string, for example: the name of the passed function is show, and the data it prepares is show ('Nanjiu').

Finally, the server returns the prepared data to the client through the HTTP protocol, and the client calls to execute the previously declared callback function (show) to operate on the returned data.

/ frontfunction jsonp ({url, params, callback}) {return new Promise ((resolve, reject) = > {let script = document.createElement ('script') window [callback] = function (data) {resolve (data) document.body.removeChild (script)} params = {. Params Callback} / / wd=b&callback=show let arrs = [] for (let key in params) {arrs.push (`${key} = ${params [key]}`)} script.src = `${url}? ${arrs.join ('&')} `document.body.appendChild (script)})} jsonp ({url: 'http://localhost:3000/say', params: {wd:' wxgongzhonghao'} Callback: 'show'}) .then (data = > {console.log (data)}) / / server with the help of the express framework let express = require (' express') let app = express () app.get ('/ say', function (req, res) {let {wd, callback} = req.query console.log (wd) / / Iloveyou console.log (callback) / / show res.end (`$ {callback} ('focus on the front end Nanjiu) `)) app.listen (3000)

The above code is equivalent to requesting data from the address http://localhost:3000/say?wd=wxgongzhonghao&callback=show, and then returns show ('focus on front-end Nanjiu') in the background, and finally runs the function show () to print out 'follow front-end Nanjiu'.

Cross-domain resource sharing (CORS)

CORS (Cross-Origin Resource Sharing) cross-domain resource sharing defines how browsers and servers should communicate when cross-domain resources must be accessed. The basic idea behind CORS is to use custom HTTP headers to let the browser communicate with the server to determine whether the request or response should succeed or fail.

CORS requires both browser and backend support. IE 8 and 9 need to be implemented through XDomainRequest.

Browsers will communicate with CORS automatically, and the key to achieving CORS communication is the back end. As long as the backend implements CORS, it implements cross-domain.

CORS can be enabled by setting Access-Control-Allow-Origin on the server. This attribute indicates which domain names can access the resource, and if you set a wildcard, it means that all websites can access the resource.

Although setting up the CORS has nothing to do with the front end, if the cross-domain problem is solved in this way, there will be two situations when sending a request, namely a simple request and a complex request.

Simple request: (the following two conditions are met, that is, simple request)

1. The request method is one of the following:

GET

POST

HEAD

2.Content-Type is one of the following three:

Text-plain

Multiparty/form-data

Application/x-www-form-urlencoded

Complex request:

If it's not a simple request, then it must be a complex request. For a CORS request with a complex request, a HTTP query request, called pre-check request, is added before the request is officially launched. The request is based on the option method to know whether the server allows the cross-domain request.

Nginx reverse proxy

The principle of Nginx reverse proxy is very simple, that is, all client requests must be processed by nginx, and nginx, as a proxy server, forwards the request to the backend, thus avoiding the browser's homology policy.

Thank you for reading this article carefully. I hope the article "homology strategy and cross-domain example analysis in browsers" shared by the editor will be helpful to you. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.