Home>

1. What is a cross-domain issue

When using js to access data from other websites in the page,There will be cross-domain issues,For example, when using ajax to request weather, courier or other data interfaces on other websites,And request data in the hybrid app,The browser will prompt the following error:

xmlhttprequest cannot load http://the domain name you requested. no "access-control-allow-origin" header is present on the requested resource. origin "http://domain name of current page" is therefore not allowed access.

2.Why cross-domain issues occur

Because browsers are restricted by the same origin policy,The js of the current domain can only read the window properties under the same domain.

Same origin policy:different domain names, Different ports, Different protocols do not allow sharing of resources, Keep your browser safe.

Thresholds set for browsers when using the same origin policy.If cross-domain can be bypassed,Therefore, the early cross-domains were all played with a safe ball.Can be considered hacking.

3.Now summarize some methods to solve cross-domain

jsonp cross domain method

We provide a script tag. Request data from the page, Also pass in the name of a callback function. After the server gets the name, Concatenate function execution format strings. Send back to the browser. script after downloading the code and executing, What is executed is a string in the form of this function call, Therefore, the local function is called.At the same time, I got the data from the server.

window.name

The name property of the window object is a very special property,When the window's location changes, and then reload,Its name attribute can remain unchanged.Then we can use page i to load page b of other domains in page a, and use page javascript to assign the data to be passed to window.name.Page a modifies the address of the iframe and turns it into an address in the same domain.Then you can read the value of window.name. This method is very suitable for one-way data requests,And the protocol is simple and secure. Does not execute external scripts without restrictions like jsonp.

document.domain

By modifying the domain attribute of the document, we can communicate between the domain and the subdomain or different subdomains.The same domain strategy considers domains and subdomains to belong to different domains.For example, www.a.com and sub.a.com are different domains.At this time, we cannot call the javascript method defined in sub.a.com on the page under www.a.com. But when we change the domain attribute of their document to a.com, the browser will consider them to be in the same domain.Then we can call each other's method to communicate.

window.postmessage

window.postmessage is a very new method defined by html5,This method can easily communicate across windows. Since it is a very new method,So it doesn't work in very old or older browsers.

Cross server domain with server code (forward proxy, reverse proxy)

Forward proxy:I resort to my server, Send data like data server, My server just needs to send a get request to the data server

Reverse proxy:Similar to forward proxy, But without the help of scripts, Instead, use the server mapping url directly.

For example:our url is http://studyit.com

The URL of the data server is http://api.botue.com/login

Configure a proxy mapping for a URL in Apache

Theoretically use url:http://studyit.com/api is to find the api folder in the website root directory

But now apache provides a mapping function, Maps/api to http://api.botue.com

With this mapping, Then visit http://api.botue.com/login and use/api/login to access it.

Benefits of reverse proxy:

Not only does it implement cross-domain (the server helps us), but when accessing data, it is like accessing a local server.In this way, data such as cookies can be obtained directly.

How to use reverse proxy (different server usage is different)

1) Find the httpd.conf configuration file, Find the two module add-ins that begin with porxy. Remove its comments.

Loadmodule proxy_module modules/mod_proxy.so

Loadmodule proxy_http_module modules/mod_proxy_http.so

2) Find the configuration file of the virtual host. Whoever needs to be a reverse proxy, modify whose configuration file,Add two options in the settings of the virtual host (that is, the pair of angle brackets)

Proxyrequests off

Proxypass/abc http://test2.com

3) Restart the server

cors cross domain

cors is a cross-domain solution proposed after es5. Only need to configure a cross-domain response header interface on the server

Advantages compared to jsonp:

1, jsonp can only implement get requests, and cors supports all types of http requests.

2. Using cors, developers can use ordinary xmlhttprequest to make requests and obtain data.Better error handling than jsonp.

3, jsonp is mainly supported by older browsers,They often do not support cors, and most modern browsers already support cors.

code show as below:

Client:

<! Doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>document</title>
</head>
<body>
  <button>request</button>
  <script src="./jquery-3.2.0.js"></script>
  <script>
    $("#btn") .click (function () {
      $.ajax ({
        url:"http://test2.com/03-index.php",        success:function (info) {
          console.log (info);
        }
      });
    });
  </script>
</body>
</html>

Service-Terminal:

<?php
//header ("access-control-allow-origin:*");//allow arbitrary websites to cross domains
header ("access-control-allow-origin:http://test1.com");//Allow the specified website
echo "cors cross domain";
?>
  • Previous Page content sorting plugin jSort usage method
  • Next Simple demonstration and prevention of csrf attacks in PHP development