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

Home

Web Front-end

JS Tutorial

Sharing solutions to cross-domain problems in JavaScript

黄舟

Jul 18, 2017 am 10:02 AM

javascriptjsMethod

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>

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.

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!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Is JavaScript Written in C? Examining the EvidenceApr 25, 2025 am 12:15 AM

Yes, the engine core of JavaScript is written in C. 1) The C language provides efficient performance and underlying control, which is suitable for the development of JavaScript engine. 2) Taking the V8 engine as an example, its core is written in C, combining the efficiency and object-oriented characteristics of C. 3) The working principle of the JavaScript engine includes parsing, compiling and execution, and the C language plays a key role in these processes.

JavaScript's Role: Making the Web Interactive and DynamicApr 24, 2025 am 12:12 AM

JavaScript is at the heart of modern websites because it enhances the interactivity and dynamicity of web pages. 1) It allows to change content without refreshing the page, 2) manipulate web pages through DOMAPI, 3) support complex interactive effects such as animation and drag-and-drop, 4) optimize performance and best practices to improve user experience.

C and JavaScript: The Connection ExplainedApr 23, 2025 am 12:07 AM

C and JavaScript achieve interoperability through WebAssembly. 1) C code is compiled into WebAssembly module and introduced into JavaScript environment to enhance computing power. 2) In game development, C handles physics engines and graphics rendering, and JavaScript is responsible for game logic and user interface.

From Websites to Apps: The Diverse Applications of JavaScriptApr 22, 2025 am 12:02 AM

JavaScript is widely used in websites, mobile applications, desktop applications and server-side programming. 1) In website development, JavaScript operates DOM together with HTML and CSS to achieve dynamic effects and supports frameworks such as jQuery and React. 2) Through ReactNative and Ionic, JavaScript is used to develop cross-platform mobile applications. 3) The Electron framework enables JavaScript to build desktop applications. 4) Node.js allows JavaScript to run on the server side and supports high concurrent requests.

Python vs. JavaScript: Use Cases and Applications ComparedApr 21, 2025 am 12:01 AM

Python is more suitable for data science and automation, while JavaScript is more suitable for front-end and full-stack development. 1. Python performs well in data science and machine learning, using libraries such as NumPy and Pandas for data processing and modeling. 2. Python is concise and efficient in automation and scripting. 3. JavaScript is indispensable in front-end development and is used to build dynamic web pages and single-page applications. 4. JavaScript plays a role in back-end development through Node.js and supports full-stack development.

The Role of C/C in JavaScript Interpreters and CompilersApr 20, 2025 am 12:01 AM

C and C play a vital role in the JavaScript engine, mainly used to implement interpreters and JIT compilers. 1) C is used to parse JavaScript source code and generate an abstract syntax tree. 2) C is responsible for generating and executing bytecode. 3) C implements the JIT compiler, optimizes and compiles hot-spot code at runtime, and significantly improves the execution efficiency of JavaScript.

JavaScript in Action: Real-World Examples and ProjectsApr 19, 2025 am 12:13 AM

JavaScript's application in the real world includes front-end and back-end development. 1) Display front-end applications by building a TODO list application, involving DOM operations and event processing. 2) Build RESTfulAPI through Node.js and Express to demonstrate back-end applications.

JavaScript and the Web: Core Functionality and Use CasesApr 18, 2025 am 12:19 AM

The main uses of JavaScript in web development include client interaction, form verification and asynchronous communication. 1) Dynamic content update and user interaction through DOM operations; 2) Client verification is carried out before the user submits data to improve the user experience; 3) Refreshless communication with the server is achieved through AJAX technology.

See all articles