Sharing solutions to cross-domain problems in JavaScript-JS Tutorial-php.cn

Sharing solutions to cross-domain problems in JavaScript

黄舟

Release： 2017-07-18 10:02:19

Original

1438 people have browsed it

This article mainly introduces relevant information about javascript cross-domain problems and solutions. Friends in need can refer to

javascript cross-domain problems and solutions

What is a cross-domain problem?

This cross-domain problem is caused by the same origin policy of the browser. The requested URL address must be the same protocol, the same domain name, and the same port as the browser URL, otherwise it is not allowed. Visited

Browser URL	To be visited	Result
http://www.123.com/index	http://www.123.com/server	Success
http://www.123.com/index	http://www.456.com/server	Domain names are different, cross-domain
http://www.123.com:8080/index	http://www.123.com:8888/index.htm	The ports are different, Cross-domain
http://www.123.com/index	https://www.123.com/index	The protocols are different , Cross-domain

Solution

Any tag with the src attribute can cross-domain, such as script, img, and iframe tags

JSONP

JSONP is the application of script tags. The full name of JSONP is JSON With Padding. JSONP consists of two parts. Return function and data. Return function is The function that should be called in the page when the response comes. The name of the callback function is specified in the request, and the data is the JSON data passed into the callback function

Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
  function jsonCallback(data){
    alert(data);
  };
  var url = "http://localhost:8888/test?callback=jsonCallback";
  var script = document.createElement(&#39;script&#39;); 
  script.type = "text/javascript";
  script.setAttribute(&#39;src&#39;, url); 
  document.getElementsByTagName(&#39;head&#39;)[0].appendChild(script);
</script>
</head>
<body>
</body>
</html>

Copy after login

Disadvantages: It is not easy to confirm whether the JSONP request failed

Security issues, JSONP loads code from other domains for execution, so its reliability must be determined

Causes of cross-domain problems

Cross-domain problems are restricted by the browser's same-origin policy. The js of the current domain name can only read the window attributes in the same domain.

Scenarios where cross-domain problems occur

When you use js in a page to obtain data from other websites, cross-domain problems will occur, such as using ajax in the website to request data from other websites. When requesting data from weather, express or other data interfaces and hybrid apps, the browser will prompt the following error. In this scenario, it is necessary to solve the cross-domain problem of js.

XMLHttpRequest cannot load http://你请求的域名. No &#39;Access-Control-Allow-Origin&#39; header is present on the requested resource. Origin &#39;http://当前页的域名&#39; is therefore not allowed access.

Copy after login

What situations will cause cross-domain problems

The URL of a website includes the protocol name, subdomain name, main domain name, and port number. For example, https://github.com/, where https is the protocol name, www is the subdomain name, github is the main domain name, and the port number is 80. When requesting data from a URL in the page, if the protocol name of this URL, If any of the subdomain names, main domain names, and port numbers are different, cross-domain problems will occur.
Even if the page request http://127.0.0.1:80/ is at http://localhost:80/, there will be cross-domain problems

Solving cross-domain problems

Solving cross-domain problems The domain problem has the following method

Use jsonp
server proxy
The server sets the Access-Control-Allow-Origin in the Request Header to specify the domain name that can obtain data

jsonp’s solution

json≠jsonp

Principle

The principle of jsonp to solve cross-domain problems is that the browser’s script tag is not restricted by the same-origin policy (you You can set the src attribute of the script in your web page to ask the path of the static file in the CDN server). Then you can use the script tag to get data from the server. When requesting, add a parameter called callbakc=?, where the number ? is the callback method you want to execute.

The above is the detailed content of Sharing solutions to cross-domain problems in JavaScript. For more information, please follow other related articles on the PHP Chinese website!