Several ways of cross-domain php-PHP Tutorial-php.cn

Several ways of cross-domain php

王林

Release： 2023-04-07 12:50:02

Original

7460 people have browsed it

Several ways of cross-domain php

Several forms of cross-domain implementation in PHP

##1. JSONP (JSON with padding) principle

Use the script tag in HTML to load js in other domains, and use script src to obtain data in other domains. However, because it is introduced through tags, So, the requested JSON format data will be run and processed as js. Obviously, this operation will not work.

Therefore, it is necessary to package the returned data in advance and encapsulate it into a function for running processing. The function name is passed to the background through the interface parameter transfer method. After the background parses the function name, it will be used in the original Wrap this function name on the data and send it to the front end. (JSONP requires the cooperation of the backend of the corresponding interface to achieve)

Example:

<script>function showData(ret){
console.log(ret);
}</script><script src="http://api.jirengu.com/weather.php?callback=showData"></script>

Copy after login

When the script src request reaches the backend, the backend It will parse the callback parameter, obtain the string showData, return the data after sending the data, and encapsulate it with showData, that is, showData({"json data"}). After the front-end script tag loads the data, it will use the json data as Parameters of showData, call the function to run.

2. CORS

The full name of CORS is cross-origin resource sharing (

Cross-Origin Resource Sharing), which is a An ajax cross-domain resource request method that supports modern browsers, and IE supports 10 and above.

Implementation method:

When using

XMLHttpRequest to send a request, the browser finds that the request does not comply with the same-origin policy and adds the A request header: Origin, and a series of processing is performed in the background. If the request is determined to be accepted, a response header is added to the return result: Access-Control-Allow-Origin; the browser determines Does the corresponding header contain the value of Origin? If so, the browser will process the response and we can get the response data. If not, the browser will directly reject it. At this time, we cannot get the response data.

Example:

server.js

var http = require(&#39;http&#39;)
var fs = require(&#39;fs&#39;)
var path = require(&#39;path&#39;)
var url = require(&#39;url&#39;)http.createServer(function(req, res){
var pathObj = url.parse(req.url, true)

  switch (pathObj.pathname) {
    case &#39;/getNews&#39;:
      var news = [
        "第11日前瞻：中国冲击4金 博尔特再战200米羽球",
        "正直播柴飚/洪炜出战 男双力争会师决赛",
        "女排将死磕巴西！郎平安排男陪练模仿对方核心"
        ]

      res.setHeader(&#39;Access-Control-Allow-Origin&#39;,&#39;http://localhost:8080&#39;)
      //res.setHeader(&#39;Access-Control-Allow-Origin&#39;,&#39;*&#39;)
      res.end(JSON.stringify(news))
      break;
    default:
      fs.readFile(path.join(__dirname, pathObj.pathname), function(e, data){
        if(e){
          res.writeHead(404, &#39;not found&#39;)
          res.end(&#39;<h1>404 Not Found</h1>&#39;)
        }else{
          res.end(data)
        }
      }) 
  }}).listen(8080)

Copy after login

index.html

<!DOCTYPE html><html><body>
  <div class="container">
    <ul class="news"></ul>
    <button class="show">show news</button>
  </div><script>
  $(&#39;.show&#39;).addEventListener(&#39;click&#39;, function(){
    var xhr = new XMLHttpRequest()
    xhr.open(&#39;GET&#39;, &#39;http://127.0.0.1:8080/getNews&#39;, true)
    xhr.send()
    xhr.onload = function(){
      appendHtml(JSON.parse(xhr.responseText))
    }
  })
  function appendHtml(news){
    var html = &#39;&#39;
    for( var i=0; i<news.length; i++){
      html += &#39;<li>&#39; + news[i] + &#39;</li>&#39;
    }
    $(&#39;.news&#39;).innerHTML = html
  }
  function $(selector){
    return document.querySelector(selector)
  }
  </script>
  </html>

Copy after login

3 , postMessage

Assuming there are two domain names (the domain names of the main domain are inconsistent), and the iframe page is allowed to access the call, then it can be implemented with postMessage.

Principle: a domain name sends a request for postMessage, and b domain name hears the message event, and processes and returns the data

//b域名<script>window.frames[0].postMessage(this.value, &#39;*&#39;);
//*号表示在任何域下都可以接收message
window.addEventListener(&#39;message&#39;, function(e){
  console.log(e.data);
})；</script>

Copy after login

The above content is only for refer to!