前端跨域问题

不念不忘少年蓝@ 2022-07-12 12:36 186阅读 0赞

## 跨域 ##

### 1、域名地址组成 ###

*  域名组成图如下:域名组成.png  
    ![这里写图片描述][SouthEast]
 *  当协议、主域名、端口号中任意一个不相同时，都算作不同域
 *  不同域之间相互请求资源，就算作‘跨域’，如:[http://www.abc.com/index.html][http_www.abc.com_index.html] 请求 [http://www.efg.com/app.js][http_www.efg.com_app.js]
 *  Javascript 出于安全方面的考虑，有着同源策略的限制，不允许跨域调用其他页面的的对象
 *  如下图:跨域情况.png  
    ![这里写图片描述][SouthEast 1]

### 2、处理跨域方法之一——代理 ###

*  通过在同域名的web服务端创建一个代理
 *  北京服务站(域名:www.beijing.com) 广州服务器(域名:www.guangzhou.com)
 *  北京服务器的后台 创建一个代理程序 proxy-guangzhouserver.php 来调用广州服务器，然后再把响应数据结果返回给前端，这样前端调用北京服务器的服务和调用广州服务器的效果一样
 *  见 代理.png  
    ![这里写图片描述][SouthEast 2]

### 3、处理跨域方法之二——jsonp ###

*  用于处理主流浏览器的跨域数据访问的问题
 *  jsonp只支持get请求，jsonp 是基于 标签的src属性，所以不可能支持 post;jquery的ajax的jsonp支持get，即使在type属性写post，实际请求仍为get请求。标签发起的请求只能是get请求

···前端js  
$.ajax(\{  
type:’GET’,  
url:’[http://127.0.0.1:8080/server.php][http_127.0.0.1_8080_server.php]‘,  
dataType:’jsonp’,  
jsonp:’callback’, //后端是php代码，可以获取到callback；请求时，在查询字符串的后面将callback写进，如果没有指定jsonp:’callback’,jQuery也会自动帮你指定  
success:function(data)\{  
if(data.success)\{  
…  
\}else\{  
…  
\}  
\}  
\})  
//请求值:=”>http://127.0.0.1:8080/server.php?callback=jQuery111111111111&=….  
···

$jsonp=$_GET('callback');
    $result=$jsonp.'({"success":false,"msg":"...",})';
    echo $result
    //返回值:jQuery111111111111({
       'success':false,"msg":'....'})

### 4、处理跨域方法之三—— XHR2(或CORS,只支持get\\post) ###

*  html5提供的XMLHttpRequest Level2已经释宪案的跨域访问以及其他的一些功能
 *  IE10以下的版本都不支持
 *  在服务器端做一些小的改造即可  
    ···服务器端php语言设置  
    header(‘Access-Control-Allow-Origin:*‘) //*指所有域都可以访问，也可以指定某个域可以访问  
    header(‘Access-Control-Allow-Method:POST,GET’)
 *  例如：

···前端js
        $.ajax({
            type:'GET',
            url:'http://127.0.0.1:8080/server.php',
            dataType:'json',
    
            success:function(data){
                if(data.success){
    
                }else{
    
                }
            }
        })
        //请求值:http://127.0.0.1:8080/server.php?callback=jQuery111111111111&_=....
    ···
    ```后台php
        $jsonp=$_GET('callback');
        $result=$jsonp.'({"success":false,"msg":"...",})';
        echo $result
        //返回值:jQuery111111111111({
       'success':false,"msg":'....'})

#### 上述是常见的几种跨域方式，当然还有很多种跨域方式，如XDR(IE8跨域解决方案)，Cross-document messaging和 WebSocket(HTML5解决方案),document.domain、location.hash和window.name(iframe形式)， flash socket … ####

详见 [http://www.cnblogs.com/vajoy/p/4295825.html][http_www.cnblogs.com_vajoy_p_4295825.html]

[SouthEast]: /images/20220712/9fd32e80c21b4f06834a9715179a5997.png
[http_www.abc.com_index.html]: http://www.abc.com/index.html
[http_www.efg.com_app.js]: http://www.efg.com/app.js
[SouthEast 1]: /images/20220712/77289cef38e6469eae34a2af8fc665a9.png
[SouthEast 2]: /images/20220712/1785c21223a34664905313f541131247.png
[http_127.0.0.1_8080_server.php]: http://127.0.0.1:8080/server.php
[http_www.cnblogs.com_vajoy_p_4295825.html]: http://www.cnblogs.com/vajoy/p/4295825.html