精华内容
下载资源
问答
  • ajax跨域

    2012-09-28 15:38:54
    ajax跨域
  • AJAX跨域

    2020-08-17 15:32:01
    一、什么是AJAX跨域问题、产生AJAX跨域问题的原因 什么是AJAX跨域问题 简单来说,就是前端调用后端服务接口时 如果服务接口不是同一个域,就会产生跨域问题 AJAX跨域场景 前后端分离、服务化的开发模式 前后端...

    一、什么是AJAX跨域问题、产生AJAX跨域问题的原因

    什么是AJAX跨域问题

    • 简单来说,就是前端调用后端服务接口时
    • 如果服务接口不是同一个域,就会产生跨域问题

    AJAX跨域场景

    • 前后端分离、服务化的开发模式
    • 前后端开发独立,前端需要大量调用后端接口的场景
    • 只要后端接口不是同一个域,就会产生跨域问题
    • 跨域问题很普遍,解决跨域问题也很重要

    AJAX跨域原因

    • 浏览器限制:浏览器安全校验限制
    • 跨域(协议、域名、端口任何一个不一样都会认为是跨域)
    • XHR(XMLHttpRequest)请求

    二、AJAX跨域解决方式

    AJAX跨域问题解决思路

    • 浏览器:浏览器取下跨域校验,实际价值不大
    • XHR:不使用XHR,使用JSONP,有很多弊端,无法满足现在的开发要求
    • 跨域:被调用方修改支持跨域调用(指定参数);调用方修改隐藏跨域(基于代理)

    1、禁止浏览器检查

    cmd启动的时候添加参数关闭安全检测

    --disable-web-security --user-data-dir=C:MyChromeDevUserData

    2、JSONP

    package com.xjn.ajax.server.controller;
    
    import org.springframework.web.bind.annotation.ControllerAdvice;
    import org.springframework.web.servlet.mvc.method.annotation.AbstractJsonpResponseBodyAdvice;
    
    /**
     * <br>
     * 标题: JSONP 全局处理<br>
     * 描述: 统一处理JSONP<br>
     */
    @ControllerAdvice
    public class JsonpAdvice extends AbstractJsonpResponseBodyAdvice{
        public JsonpAdvice() {
            // 与前端约定好回调方法名称,默认是callback
            super("callback");
        }
    }
                $.ajax({
                    url: base + "/get1",
                    dataType: "jsonp",
                    jsonp:"callback",
                    success: function (res) {
                        result = res;
                    }
                });

    jsonp实际原理是在url后面拼接一串字符,使浏览器知道自己是jsonp请求。所以仅适用于get方法请求,后端返回来的数据经过jsonpadvice配置,返回的是javascript数据。

    3、支持跨域

    方法一:被调用方支持跨域

    被调用方解决,基于支持跨域的解决思路,基于Http协议关于跨域的相关规定,在响应头里增加指定的字段告诉浏览器,允许调用跨域请求是直接从浏览器发送到被调用方,被调用方在响应头里增加相关信息,返回到页面,页面能正常获取请求内容。

    过滤器java代码

    import org.springframework.util.StringUtils;
    
    import javax.servlet.*;
    import javax.servlet.FilterConfig;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.IOException;
    
    /**
     * <br>
     * 标题: 服务端解决跨域<br>
     * 描述: 使用Filter<br>
     *
     * @author zc
     * @date 2018/04/18
     */
    public class CrosFilter implements Filter {
    
        @Override
        public void init(FilterConfig filterConfig) throws ServletException {
    
        }
    
        @Override
        public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
            HttpServletResponse res = (HttpServletResponse)response;
    
            HttpServletRequest req = (HttpServletRequest)request;
    
            // 支持所有域
            String origin = req.getHeader("Origin");
            if (!StringUtils.isEmpty(origin)){
                // 支持任何域名的跨域调用 且 支持带cookie(是被调用方域名的cookie,而不是调用方的cookie)
                res.addHeader("Access-Control-Allow-Origin",origin);
            }
            // 指定允许的域,带cookie时,origin必须是全匹配,不能使用 *
    //        res.addHeader("Access-Control-Allow-Origin","http://localhost:8081");
            // 允许所有域,但不能满足带 cookie 的跨域请求
    //        res.addHeader("Access-Control-Allow-Origin","*");
    
            // 支持所有自定义头
            String headers = req.getHeader("Access-Control-Allow-Headers");
            if (!StringUtils.isEmpty(headers)){
                // 允许所有header
                res.addHeader("Access-Control-Allow-Headers",headers);
            }
            // 允许所有header
    //        res.addHeader("Access-Control-Allow-Headers","*");
    
            // 指定允许的方法
    //        res.addHeader("Access-Control-Allow-Methods","GET");
            // 允许所有方法
            res.addHeader("Access-Control-Allow-Methods","*");
            // 允许浏览器在一个小时内,缓存跨域访问信息(即上面三个信息)
            res.addHeader("Access-Control-Max-Age","3600");
            // 启用 cookie
            res.addHeader("Access-Control-Allow-Credentials","true");
    
            chain.doFilter(request,response);
        }
    
        @Override
        public void destroy() {
    
        }
    }

    web.xml中配置注册过滤器 (1)

    <filter>
        <filter-name>CrossFilter</filter-name>
        <filter-class>com.test.ajax.cross.filter.CrossFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>CrossFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

    javabean方式配置过滤器

    import org.springframework.boot.web.servlet.FilterRegistrationBean;
    import org.springframework.context.annotation.Bean;
    import org.springframework.context.annotation.Configuration;
    
    /**
     * <br>
     * 标题: 配置类<br>
     * 描述: 注册CrosFilter<br>
     */
    @Configuration
    public class FilterConfig {
    
        @Bean
        public FilterRegistrationBean registrationBean(){
            FilterRegistrationBean filter = new FilterRegistrationBean();
            filter.addUrlPatterns("/*");
            filter.setFilter(new CrosFilter());
            return filter;
        }
    }

    跨域携带cookie

        function getCookie(){
             $.ajax({
                 url: "http://localhost:8080/test-ajax-cross/test/getCookie",
                 xhrFields:{
                     // 带上证书,发送 AJAX 请求时带上 cookie
                     withCredentials:true
                 },
                 // 允许跨域
                 crossDomain: true,
                 success:function(result){
                     console.log(result);
                     $("body").append("<br>" + JSON.stringify(result));
                 }
             });

    简单请求与非简单请求

    • 简单请求:浏览器先发送真正的请求后检查
    • 请求方法:GET、HEAD、POST的一种
    • 请求header:无自定义header;Content-Type为:text/plain、multipart/form-data、application/x-www-form-urlencoded的一种
    • 非简单请求:浏览器先发预检命令,检查通过后,才发送真正的请求
    • 常见的有:PUT、DELETE
    • 其它条件:发送Json格式的请求、带自定义header的请求
    • 预检命令:浏览器检测到跨域请求, 会自动发出一个OPTIONS请求, 就是所谓的预检(preflight)请求。当预检请求通过的时候,才发送真正的请求。

    另外可以对被调用方的apache服务器、nginx服务器进行配置跨域

    CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。cors是浏览器直接访问被调用方服务器。

    4、隐藏跨域

    使用Nginx反向代理实现

    • 修改主机hosts文件增加映射本地域名:127.0.0.1 a.com
    • 在vhost目录下创建a.com.conf
    • 启动niginx,访问a.com/ajaxserver/get1

    编写a.com.conf

    server{
        listen 80;
        server_name a.com;
    
        location /{
             proxy_pass http://localhost:8081/;
        }
    
        location /ajaxserver{
             proxy_pass http://localhost:8080/test/;
        }
    
    }

     

    展开全文
  • Ajax跨域

    2018-08-27 08:11:49
    ajax跨域 ajax跨域简单来说,就是网站A调用B网站的数据。 说到这里还要再说一个那就是什么叫同源策略。同源策略其实就是它会阻止ajax跨域访问(就是阻止数据响应使用)。 同源策略: 就是一种约定,是浏览器的一...

    ajax跨域

    ajax跨域简单来说,就是网站A调用B网站的数据。

    说到这里还要再说一个那就是什么叫同源策略。同源策略其实就是它会阻止ajax跨域访问(就是阻止数据响应使用)。

    同源策略: 就是一种约定,是浏览器的一种安全功能。

    同源: 同协议,同域名, 同端口   跨域就是不同源。有同源策略,当获取一个网站数据时会报错,可以在相应主体里面看到服务器响应了浏览器的请求,将结果返回了浏览器, 但是却被浏览器阻拦了。【如请求的那个服务器数据为123,则可发现,在响应主体(response)已经有了数据123了,说明服务器响应了浏览器的请求,返回了数据给浏览器。此时报错结果为'Access-Control-Allow-Origin',只要看到该错误提示,就说明正在执行跨域请求,该请求的结果被浏览器阻拦了】


    解决同源策略有三种方式:

    1)服务器代理

    2)cors (跨资源共享)

    3)jsonp

    1)服务器代理
    它的原理就是,后台PHP有一个函数叫 file_get_contents()  它可以访问到本地数据也可以访问互联网数据,从而实现的跨域。

    2)cors 跨域
    cors 意思就是跨域资源共享
    原理:就是在服务器端(PHP文件中)声明一下要不要进行同源限制
    如果设置为*号 就是代表所有的外部网站都可以获取到这个文件的数据。header('Acess-Control-Allow-origin:*');如果只允许某个网站访问就直接写网址即可,比如让www.demo.com 这个网址访问就可以写成:header('Acess-Control-Allow-origin:www.demo.com');即可。

    3)jsonp跨域
    jsonp就是解决ajax跨域的一种方案。
    原理:利用src和href两个属性,可以跨域访问,利用这一“漏洞”发送ajax请求。
    就是在一个文件(比如www.study.com/jsonp/index.html)中用script标签引入另一个文件中的数据(比如www.demo.com/jsonp.php)。如数据为123,在相应主体中能看到,已经返回回来了。如果为aaa()就是返回一个函数调用的字符串,所以请求的文件要有一个函数定义。如果为aaa('{"name":"zs", "age":12}'),就是函数调用的参数为{"name":"zs", "age": 12} 。对象也能作为函数调用的参数。总结:什么数据都可以返回回来的。

    注意:jsonp不算ajax?   ,因为ajax需要实例化XMLHttpRequest对象,调用open、send等方法、属性和事件来完成。而jsonp是利用了src属性的漏洞来完成的跨域请求。

    ajax跨域jsonp方式 
    $.post $.get $.ajax都能发送跨域请求。但是,$.post和$.get是要依靠cors方式的,只有$.ajax能使用jsonp方式

    核心设置:

    设置请求类型为get方式   type:‘get’

    设置返回的数据类型dataType 为 dataType:‘jsonp’。

    一个额外参数json,可以是任意参数英文字符串,但一般默认为callback, jsonp:‘callback'。

    该参数会产生一个随机字符串
    前端使用该字符串创建一个函数
    后端接收该字符串作为返回函数的名称

    例如: 使用jsonp发送跨域请求

    $.ajax({
    
                url: 'http://www.demo.com/ajax_jsonp.php',
    
                type: 'get',
    
                dataType: 'jsonp',
    
                jsonp: 'callback',
    
                success: function(msg){  //函数定义
    
                    console.log(msg);
    
                }
    
            })   
    
    $callback = $_GET['callback']; //接受函数名
    
    echo $callback . "(123)"; ///拼接函数调用字符串

    执行结果为:


    当jsonp 参数变为fn时,

    $callback = $_GET['callback']; //接受前端发来的数据(在这也就是函数名)
    
    //$callback = jQuery12373491337883247891_13732787234
    
    echo $callback . "(123)"; ///拼接函数调用字符串   就相当于函数调用,

    而 sucess参数就相当于函数定义

    success: function(msg){  //就是函数定义
    
                    console.log(msg);
    
                }

     

    展开全文
  • ajax 跨域

    2018-03-12 17:50:00
    为啥AJAX跨域 1、浏览器限制(为了安全) 2、跨域 3、xhr 请求(带src的请求就不会跨域,因为不是xhr请求) ajax跨域解决方法 1、浏览器禁止检查(实际中不现实,难保证用户的一致性) 2,、不发送xhr请求...

    示例一(正常的ajax请求)

    示例二(跨域错误的ajax请求)

     

    为啥AJAX跨域

    1、浏览器限制(为了安全)

    2、跨域

    3、xhr 请求(带src的请求就不会跨域,因为不是xhr请求)

    ajax跨域解决方法

    1、浏览器禁止检查(实际中不现实,难保证用户的一致性)

    2,、不发送xhr请求(使用jsonp )

        jsonp 转化成script 用src发送

    3、调用方   隐藏跨域(找代理)

    4、被调用方   修改代码,支持跨域 (比如 a 访问 b  ,在 b 返回的字段中 加入或修改相关参数  告诉a 允许访问)

    1、//跨域访问设置 前端带cookie
    $.ajaxSetup({
    xhrFields: {
    withCredentials: true
    }
    })

    转载于:https://www.cnblogs.com/itliulei/p/8550642.html

    展开全文
  • Ajax 跨域

    千次阅读 2021-01-28 20:38:51
    AJAX 的方式请求。 同源或者不同源说的是两个地址之间的关系,不同源地址之间请求我们称之为跨域请求什么是同源?例如:http://www.example.com/detail.html 与一下地址对比 对比地址 是否同源 原因 ...

    跨域

    1. 相关概念

    同源策略是浏览器的一种安全策略,所谓同源是指 域名,协议,端口 完全相同,只有同源的地址才可以相互通过

    AJAX 的方式请求。

    同源或者不同源说的是两个地址之间的关系,不同源地址之间请求我们称之为跨域请求什么是同源?例如:http://www.example.com/detail.html 与一下地址对比

    对比地址 是否同源 原因
    http://api.example.com/detail.html 不同源 域名不同
    https://www.example.com/detail.html 不同源 协议不同
    http://www.example.com:8080/detail.html 不同源 端口不同
    http://api.example.com:8080/detail.html 不同源 域名、端口不同
    https://api.example.com/detail.html 不同源 协议、域名不同
    https://www.example.com:8080/detail.html 不同源 端口、协议不同
    http://www.example.com/other.html 同源 只是目录不同

    2. 解决方案

    现代化的 Web 应用中肯定会有不同源的现象,所以必然要解决这个问题,从而实现跨域请求。

    2.1. JSONP

    JSON with Padding,是一种借助于 script 标签发送跨域请求的技巧。

    其原理就是在客户端借助 script 标签请求服务端的一个动态网页(php 文件),服务端的这个动态网页返回一段带有函数调用的 JavaScript 全局函数调用的脚本,将原本需要返回给客户端的数据传递进去。

    以后绝大多数情况都是采用 JSONP 的手段完成不同源地址之间的跨域请求客户端 http://www.zce.me/users-list.html

     <script src="http://api.zce.me/users.php?callback=foo"></script>
    

    服务端 http://api.zce.me/users.php?callback=foo 返回的结果

    foo(['我', '是', '你', '原', '本', '需', '要', '的', '数', '据'])
    

    总结一下:由于 XMLHttpRequest 无法发送不同源地址之间的跨域请求,所以我们必须要另寻他法,script 这种方案就是我们最终选择的方式,我们把这种方式称之为 JSONP,如果你不了解原理,先记住怎么用,多用一段时间再来看原理。

    问题:

    1. JSONP 需要服务端配合,服务端按照客户端的要求返回一段 JavaScript 调用客户端的函数
    2. 只能发送 GET 请求

    注意:JSONP 用的是 script 标签,更 AJAX 提供的 XMLHttpRequest 没有任何关系!!!

    jQuery 中使用 JSONP 就是将 dataType 设置为 jsonp其他常见的 AJAX 封装 库:

    • Axios

    2.2. CORS

    Cross Origin Resource Share,跨域资源共享

    // 允许远端访问
    header('Access‐Control‐Allow‐Origin: *');
    

    这种方案无需客户端作出任何变化(客户端不用改代码),只是在被请求的服务端响应的时候添加一个 Access- Control-Allow-Origin 的响应头,表示这个资源是否允许指定域请求。

    cors代码

    cors.php

    <?php
    
    $conn = mysqli_connect('localhost', 'root', '123456', 'demo');
    
    $query = mysqli_query($conn, 'select * from users');
    
    while ($row = mysqli_fetch_assoc($query)) {
      $data[] = $row;
    }
    
    // 一行代码搞定
    // 允许跨域请求
    header('Access-Control-Allow-Origin: *');
    
    header('Content-Type: application/json');
    echo json_encode($data);
    
    

    cors.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>AJAX 跨域(CORS)</title>
      <!-- Cross Origin Resource Share -->
    </head>
    <body>
      <script src="jquery.js"></script>
      <script>
    
        $.get('http://localhost/cors.php', {}, function (res) {
          console.log(res)
        })
    
      </script>
    </body>
    </html>
    
    

    3. jsonp案例

    在这里插入图片描述

    server.php

    <?php
    
    $conn = mysqli_connect('localhost', 'root', '123456', 'test');
    
    $query = mysqli_query($conn, 'select * from users');
    
    while ($row = mysqli_fetch_assoc($query)) {
      $data[] = $row;
    }
    
    if (empty($_GET['callback'])) {
      header('Content-Type: application/json');
      echo json_encode($data);
      exit();
    }
    
    // 如果客户端采用的是 script 标记对我发送的请求
    // 一定要返回一段 JavaScript
    header('Content-Type: application/javascript');
    $result = json_encode($data);
    
    $callback_name = $_GET['callback'];
    
    echo "typeof {$callback_name} === 'function' && {$callback_name}({$result})";
    
    

    client.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>JSONP 客户端</title>
    </head>
    <body>
      <script>
    
        // var script = document.createElement('script')
        // script.src = 'http://localhost/jsonp/server.php'
        // document.body.appendChild(script)
    
        // function aaabbb (data) {
        //   console.log('1111', data)
        // }
    
        // var script = document.createElement('script')
        // script.src = 'http://localhost/jsonp/server.php'
        // document.body.appendChild(script)
    
        // function aaabbb (data) {
        //   console.log('2222', data)
        // }
    
    
        // 为每一个请求创建一个唯一的函数
    
        // var funcName = 'haha_' + Date.now() + Math.random().toString().substr(2, 5)
    
        // var script = document.createElement('script')
        // script.src = 'http://localhost/jsonp/server.php?callback=' + funcName
        // document.body.appendChild(script)
    
        // window[funcName] = function (data) {
        //   console.log('1111', data)
        // }
    
    
        function jsonp (url, params, callback) {
          var funcName = 'jsonp_' + Date.now() + Math.random().toString().substr(2, 5)
    
          if (typeof params === 'object') {
            var tempArr = []
            for (var key in params) {
              var value = params[key]
              tempArr.push(key + '=' + value)
            }
            params = tempArr.join('&')
          }
    
          var script = document.createElement('script')
          script.src = url + '?' + params + '&callback=' + funcName
          document.body.appendChild(script)
    
          window[funcName] = function (data) {
            callback(data)
    
            delete window[funcName]
            document.body.removeChild(script)
          }
        }
    
    
        jsonp('http://09.com/jsonp/server.php', { id: 123 }, function (res) {
          console.log(res)
        })
    
      </script>
    </body>
    </html>
    
    
    展开全文
  • 解决ajax跨域问题【5种解决方案】

    万次阅读 多人点赞 2018-09-02 21:31:33
    什么是跨域问题? 跨域问题来源于JavaScript的"同源策略",即只有 协议+主机名+...跨域问题是针对JS和ajax的,html本身没有跨域问题。 查看浏览器开发者工具Console报错: Failed to load http://a.a.com:8080/A/...
  • ajax跨域讲解

    2019-03-06 17:08:15
    在收集AJAX面试题的时候其实就已经有过AJAX跨域的问题的了,当时候知道了为什么会存在跨域,以及跨域解决的方案有哪些,今天随着课程的学习,又加深了AJAX跨域的理解,以此记录下来。
  • ajax 跨域 headers JavaScript ajax 跨域请求 +设置headers 实践 1.第一步 服务端在入口文件设置响应头 header(‘Access-Control-Allow-Origin:*’); //支持全域名访问,不安全,部署后需要固定限制为客户端网址 ...
  • Ajax如何进行跨域请求?这篇文章主要为大家详细介绍了Ajax跨域请求的原理,Ajax怎么样做跨域请求?具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • ajax跨域访问

    2017-01-11 18:57:43
    ajax跨域访问
  • ajax跨域问题

    万次阅读 2018-06-07 00:18:44
    什么事ajax跨域问题 跨域问题来自于浏览器同源策略的限制,包括DOM同源限制和ajax同源限制,本文探讨的是ajax跨域ajax跨域指的是一个页面的ajax只能请求和当前页面同源的数据,如果发现请求到的数据不符合...
  • ajax 跨域 headers JavaScript ajax 跨域请求 +设置headers 实践 解决跨域调用服务并设置headers 主要的解决方法需要通过服务器端设置响应头、正确响应options请求,正确设置 JavaScript端需要设置的...
  • 主要介绍了Ajax跨域Session和跨域访问的相关问题,以及需要注意的地方,这里推荐给大家
  • 关于跨域,有N种类型,本文只专注于ajax请求跨域(,ajax跨域只是属于浏览器”同源策略”中的一部分,其它的还有Cookie跨域iframe跨域,LocalStorage跨域等这里不做介绍),内容大概如下: 什么是ajax跨域 o原理 o表现...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 19,433
精华内容 7,773
关键字:

ajax跨域