精华内容
下载资源
问答
  • GB28181流媒体服务搭建 搭建入口,解压启动即用:...JS调用遇到跨域解决示例 添加 xhrFields: { withCredentials: true},crossDomain: true, $.ajax({ type: "GET", url: "http://oth...

    GB28181流媒体服务搭建

    搭建入口,解压启动即用:https://www.liveqing.com/docs/download/LiveGBS.html

    JS调用遇到跨域解决示例

    添加 xhrFields: { withCredentials: true},crossDomain: true,

    $.ajax({
        type: "GET",
        url: "http://other-domain:10000/api/v1/login",
        xhrFields: { 
            withCredentials: true
        },
        crossDomain: true, 
        data: {
            username: 'test',
            password: 'test'
        },
        success: function(data) {
            console.log(data);
        }
    })
    

    axios请求接口遇到跨域问题

    添加 withCredentials: true

    post请求

     axios.post("http://ip:10000/api/v1/test", {
                param1: 'test',
                param2: 'test'
            }, {
                withCredentials: true
            }).then(res => {
                console.log(res)
            }).catch(err => {
                console.log(err);
            })
    

    get请求

       axios.get("http://ip:10000/api/v1/test", {
                params:{start:0,limit:10},
                withCredentials: true
            }).then(res => {
                console.log(res)
            }).catch(err => {
                console.log(err);
            })
    
    展开全文
  • 在开发静态页面时,类似Vue应用,我们常会调用一些接口,这些接口极可能是跨域,这篇文章主要介绍了如何用Nginx解决前端跨域问题,非常具有实用价值,需要朋友可以参考下
  • 但是调用接口,发现跨域问题, 目前完全没有思路。 ![图片说明](https://img-ask.csdn.net/upload/201907/10/1562728863_818349.png) ![图片说明]...
  • 同源策略禁止读取位于 https://************/login 远程资源。(原因:CORS 头 'Access-Control-Allow-Headers' 中令牌 'multipart/...但其他浏览器,如360、猎豹等就可正常解析实现跨域。想问下这是怎么回事???
  • 目录跨域问题举个栗子Nginx解决跨域问题什么时候发送OPTIONS方法预检请求OPTIONS方法参考文章 跨域问题 跨域问题经常发生在前后端分离开发模式中,指是浏览器不允许非同源请求调用,是浏览器出于安全考虑一种...

    跨域问题

    跨域问题经常发生在前后端分离开发模式中,指的是浏览器不允许非同源的请求调用,是浏览器出于安全考虑的一种策略.
    两个网址之间只要协议, 域名, 端口, 子域名其中一个不同, 就会被视为非同源.

    举个栗子

    前端用html + js 代码做一个简单的接口调用

    <html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
    </head>
    <body>
    <h2>Hello World!</h2>
    <script type="text/javascript">
    
        var baseUrl = "http://localhost:8888/test";
    
        function getFunc(){
            var request = new XMLHttpRequest();
            request.open("GET", baseUrl + "/get")
            request.send();
            request.onreadystatechange = function(){
                if(request.status==200 && request.readyState == 4){
                    console.log(request.responseText)
                }
            }
        }
    
        function postFunc(){
            var request = new XMLHttpRequest();
            request.open("POST", baseUrl + "/post")
            request.send();
            request.onreadystatechange = function(){
                if(request.status==200 && request.readyState == 4){
                    console.log(request.responseText)
                }
            }
        }
    
        function putFunc(){
            var request = new XMLHttpRequest();
            request.open("PUT", baseUrl + "/put")
            request.send();
            request.onreadystatechange = function(){
                if(request.status==200 && request.readyState == 4){
                    console.log(request.responseText)
                }
            }
        }
    
        function deleteFunc(){
            var request = new XMLHttpRequest();
            request.open("DELETE", baseUrl + "/delete")
            request.send();
            request.onreadystatechange = function(){
                if(request.status==200 && request.readyState == 4){
                    console.log(request.responseText)
                }
            }
        }
        
    </script>
    </body>
        <input type="button" value="get方法" onclick="getFunc()">
        <input type="button" value="post方法" onclick="postFunc()">
        <input type="button" value="put方法" onclick="putFunc()">
        <input type="button" value="delete方法" onclick="deleteFunc()">
    </html>
    
    

    后端用java写几个简单的接口

    @RestController
    @RequestMapping("/test")
    public class Test {
    
        @GetMapping("/get")
        public String getMethod(){
            System.out.println("执行了一次get操作");
            return "get method";
        }
    
        @PostMapping("/post")
        public String postMethod(){
            System.out.println("执行了一次post操作");
            return "post method";
        }
    
        @PutMapping("/put")
        public String putMethod(){
            System.out.println("执行了一次put操作");
            return "put method";
        }
    
        @DeleteMapping("/delete")
        public String deleteMethod(){
            System.out.println("执行了一次delete操作");
            return "delete method";
        }
    }
    
    

    此时无论以何种请求方法调用后台接口都会触发跨域问题
    跨域问题触发时浏览器控制台的报错信息

    Nginx解决跨域问题

    Nginx是一个高性能的反向代理服务器,它除了可以做反向代理外,对于分布式的系统还可以实现负载均衡功能.本文主要讲如何通过Nginx反向代理解决跨域问题.
    先贴上我的nginx.conf配置文件

    user  root;
    worker_processes  1;
    
    error_log  /var/log/nginx/error.log warn;
    pid        /var/run/nginx.pid;
    
    
    events {
        worker_connections  1024;
    }
    
    
    http {
        include       /etc/nginx/mime.types;
        default_type  application/octet-stream;
    
        log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                          '$status $body_bytes_sent "$http_referer" '
                          '"$http_user_agent" "$http_x_forwarded_for"';
    
        access_log  /var/log/nginx/access.log  main;
    
        sendfile        on;
    
        keepalive_timeout  65;
    
        server {
            listen       80;
            server_name  localhost;
    
            location /test/ {
                # 允许跨域请求的来源, *表示所有
                add_header Access-Control-Allow-Origin *;
                # 允许跨域请求的方法类型
                add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS, PUT, DELETE';
                # OPTIONS请求返回的头部信息中Access-Control-Allow-Headers字段的值
                add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
                # 请求转发路径
                proxy_pass http://192.168.1.101:8888/test/;
    
                # if ($request_method = 'OPTIONS') {
                #         add_header Access-Control-Allow-Origin *;
                #         add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,PATCH,OPTIONS;
                #         return 204;
                # }
            }
        }
    }
    

    配置文件中
    Access-Control-Allow-Origin * 代表允许所有来源的跨域请求调用
    Access-Control-Allow-Methods 表示允许的方法类型
    Access-Control-Allow-Headers 表示OPTIONS方法返回的Access-Control-Allow-Headers字段(这个后边具体说)
    proxy_pass http://192.168.1.101:8888/test/; 表示转发的地址, 由于我nginx是跑在docker中的,因此需要用本机的IP地址, 如果nginx是直接跑在机器上的用localhost或127.0.0.1即可.

    用这个配置文件启动nginx之后, 将html代码中的baseUrl改为 http://localhost/test 之后再次尝试调用接口.

    var baseUrl = "http://localhost/test";
    

    在这里插入图片描述
    根据控制台打印结果可以发现, get跟post的请求可以正常调用, 但是put跟delete请求仍然报跨域异常(原因下边说).

    接着讲nginx配置文件中注释部分代码取消注释, 重启nginx, 发现put跟delete类型的方法也可以正常调用

    	if ($request_method = 'OPTIONS') {
                      add_header Access-Control-Allow-Origin *;
                      add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,PATCH,OPTIONS;
                      return 204;
         }
    

    在这里插入图片描述

    什么时候发送OPTIONS方法

    预检请求

    HTTP请求可以分为简单HTTP请求需预检HTTP请求(复杂HTTP请求).
    满足以下条件的可以视为简单HTTP请求:
    使用的方法为GET, POST, HEAD之一且Content-Type的值仅为下列之一:test-plain, multipart/form-data, application/x-www-form-urlencoded
    其余的全视为需预检HTTP请求.

    OPTIONS方法

    在发起需预检HTTP请求时,总共会发出两个请求,首先发送OPTIONS方法, 如果OPTIONS方法的返回值符合条件,才可以发送真实的请求
    例如前边的例子, 在我们发送delete或者put类型请求时,观察浏览器控制台可以发现总共发送了两个请求
    在这里插入图片描述
    其中Type为preflight类型的请求中, 调用的方法类型即为OPTIONS
    在这里插入图片描述
    查看这个请求的具体返回值我们可以发现response的头部中有Access-Control-Allow-OriginAccess-Control-Allow-Methods两个字段,他们的值就是我们在Nginx配置文件中设置的值

    if ($request_method = 'OPTIONS') {
                        add_header Access-Control-Allow-Origin *;
                        add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,PATCH,OPTIONS;
                        return 204;
                }
    

    上边这段代码的意思就是当请求方法类型为OPTIONS时,将允许的来源和方法设置进response头部中,并且将状态码设置为204(成功且不刷新页面).
    如果将这段代码注释掉后重启nginx会发现preflight请求失败
    在这里插入图片描述
    但是这里有个疑惑就是为什么需要针对OPTIONS类型的方法去做特殊处理,不是所有的请求都会经过nginx并且将Access-Control-Allow-OriginAccess-Control-Allow-Methods两个字段设置好吗.希望有懂的大佬可以留言解惑下.

    至此用Nginx解决跨域问题的介绍完毕, 如果有什么错误的地方希望各位指出, 谢谢!

    参考文章

    【转】前端 | 浅谈预检请求
    Nginx配置跨域请求 Access-Control-Allow-Origin *

    展开全文
  • 如何解决ajax跨域问题

    2016-05-05 12:05:22
    跨域问题 起 因是这样,为了复用,减少重复开发,单独开发了一个用户权限管理系统,共其他系统获取认证与授权信息,暂且称之为A系统;调用A系统以B为例。在B系统 中用ajax调用A系统系统的接口(数据格式为json)...

    原文:http://www.congmo.net/blog/2012/06/27/ajax-cross-domain/


    跨域问题

    起 因是这样的,为了复用,减少重复开发,单独开发了一个用户权限管理系统,共其他系统获取认证与授权信息,暂且称之为A系统;调用A系统以B为例。在B系统 中用ajax调用A系统系统的接口(数据格式为json),当时特别困惑,在A系统中访问相应的url可正常回返json数据,但是在B系统中使用 ajax请求同样的url则一点儿反应都没有,好像什么都没有发生一样。这样反反复复改来改去好久都没能解决,于是求救同事,提醒可能是ajax跨域问 题,于是就将这个问题当做跨域问题来解决了。

    知跨域而不知如何解决

    知道问题的确切原因,剩下的就是找到解决问题的方法了。google了好久,再次在同事的指点下知道jQuery的ajax有jsonp这样的属性可以用来解决跨域的问题。

    找到一种解决方式

    现在也知道了怎样来解决跨域问题,余下的就是实现的细节了。实现的过程中错误还是避免不了的。由于不了解json和jsonp两种格式的区别,也犯了错误,google了好久才解决。

    首先来看看在页面中如何使用jQuery的ajax解决跨域问题的简单版:

    复制代码
    $(document).ready(function(){
       var url='http://localhost:8080/WorkGroupManagment/open/getGroupById"
           +"?id=1&callback=?';
       $.ajax({
         url:url,
         dataType:'jsonp',
         processData: false, 
         type:'get',
         success:function(data){
           alert(data.name);
         },
         error:function(XMLHttpRequest, textStatus, errorThrown) {
           alert(XMLHttpRequest.status);
           alert(XMLHttpRequest.readyState);
           alert(textStatus);
         }});
       });
    复制代码

    这样写是完全没有问题的,起先error的处理函数中仅仅是alert(“error”),为了进一步弄清楚是什么原因造成了错误,故将处理函数变 为上面的实现方式。最后一行alert使用为;parsererror。百思不得其解,继续google,最终还是在万能的stackoverflow找 到了答案,链接在这里。原因是jsonp的格式与json格式有着细微的差别,所以在server端的代码上稍稍有所不同。

    比较一下json与jsonp格式的区别:

    json格式:
    {
        "message":"获取成功",
        "state":"1",
        "result":{"name":"工作组1","id":1,"description":"11"}
    }
    jsonp格式:
    callback({
        "message":"获取成功",
        "state":"1",
        "result":{"name":"工作组1","id":1,"description":"11"}
    })

    看出来区别了吧,在url中callback传到后台的参数是神马callback就是神马,jsonp比json外面有多了一层,callback()。这样就知道怎么处理它了。于是修改后台代码。

    后台java代码最终如下:

    复制代码
    @RequestMapping(value = "/getGroupById")
      public String getGroupById(@RequestParam("id") Long id,
          HttpServletRequest request, HttpServletResponse response)
          throws IOException {
        String callback = request.getParameter("callback");
        ReturnObject result = null;
        Group group = null;
        try {
          group = groupService.getGroupById(id);
          result = new ReturnObject(group, "获取成功", Constants.RESULT_SUCCESS);
        } catch (BusinessException e) {
          e.printStackTrace();
          result = new ReturnObject(group, "获取失败", Constants.RESULT_FAILED);
        }
        String json = JsonConverter.bean2Json(result);
        response.setContentType("text/html");
        response.setCharacterEncoding("utf-8");
        PrintWriter out = response.getWriter();
        out.print(callback + "(" + json + ")");
        return null;
      }
    复制代码

    注意这里需要先将查询结果转换我json格式,然后用参数callback在json外面再套一层,就变成了jsonp。指定数据类型为jsonp的ajax就可以做进一步处理了。

    虽然这样解决了跨域问题,还是回顾下造成parsererror的原因。原因在于盲目的把json格式的数据当做jsonp格式的数据让ajax处理,造成了这个错误,此时server端代码是这样的:

    复制代码
    @RequestMapping(value = "/getGroupById")
      @ResponseBody
      public ReturnObject getGroupById(@RequestParam("id") Long id,
          HttpServletRequest request, HttpServletResponse response){
        String callback = request.getParameter("callback");
        ReturnObject result = null;
        Group group = null;
        try {
          group = groupService.getGroupById(id);
          result = new ReturnObject(group, "获取成功", Constants.RESULT_SUCCESS);
        } catch (BusinessException e) {
          e.printStackTrace();
          result = new ReturnObject(group, "获取失败", Constants.RESULT_FAILED);
        }
        return result;
      }
    复制代码

    至此解决ajax跨域问题的第一种方式就告一段落。

    追加一种解决方式

    追求永无止境,在google的过程中,无意中发现了一个专门用来解决跨域问题的jQuery插件-jquery-jsonp

    有第一种方式的基础,使用jsonp插件也就比较简单了,server端代码无需任何改动。

    来看一下如何使用jquery-jsonp插件解决跨域问题吧。

    复制代码
    var url="http://localhost:8080/WorkGroupManagment/open/getGroupById"
        +"?id=1&callback=?";
    $.jsonp({
      "url": url,
      "success": function(data) {
        $("#current-group").text("当前工作组:"+data.result.name);
      },
      "error": function(d,msg) {
        alert("Could not find user "+msg);
      }
    });
    复制代码

     

    至此两种解决跨域问题的方式就全部介绍完毕。


    展开全文
  • JHipster spring boot 接口解决跨域问题

    千次阅读 2019-02-13 15:57:20
    Jhipster默认对跨域的支持   但是要怎么用,还是看你了....   ...简单一点说明就是,不同服务器之间进行接口调用.   如何跨域   CORS是一个W3C标准,全称是"跨域资源共享"...

    Jhipster默认对跨域的支持

     

    但是要怎么用,还是看你了....

     

    什么是跨域

    浏览器的同源策略导致了跨域.

    同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。

     

    为什么要跨域

    简单的一点说明就是,不同的服务器之间进行接口调用.

     

    如何跨域

     

    CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)跨域资源共享 CORS 详解。看名字就知道这是处理跨域问题的标准做法。CORS有两种请求,简单请求和非简单请求。\

     

     

    JHipster的跨域解决方案:

     

    JHipster中给的配置文件为:

    jhipster:
        http:
            version: V_1_1 # To use HTTP/2 you will need SSL support (see above the "server.ssl" configuration)
        # CORS is only enabled by default with the "dev" profile, so BrowserSync can access the API
        cors:
            allowed-origins: "*"
            allowed-methods: GET, PUT, POST, DELETE, OPTIONS
            allowed-headers: "*"
            exposed-headers:
            allow-credentials: true
            max-age: 1800

     

    使用注入bean的方式,来进行对url path的拦截

     

        @Bean
        public CorsFilter corsFilter() {
            UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
            CorsConfiguration config = jHipsterProperties.getCors();
            if (config.getAllowedOrigins() != null && !config.getAllowedOrigins().isEmpty()) {
                log.debug("Registering CORS filter");
                source.registerCorsConfiguration("/**", config);
                source.registerCorsConfiguration("/v2/api-docs", config);
            }
            return new CorsFilter(source);
        }

    cors中对需要传入的是path路径...

    这里就是有个坑....

     

    使用原生的JHipster的构建的框架中.register拦截的路径是/api/**,即/api下所有的目录及子目录,而我们在写接口的时候,接口名称是不会添加/api,而是直接写简单的业务名称来区分不同的接口名称,这也就是说.我们注册拦截的需要进行跨域的是/api/**下所有的接口,而我们写的接口不在这个目录下面,所以就会出现接口不满足跨域的问题...

     

    改为/**后就是对所有的接口路径进行拦截....

     

    TIPS

    /** 的意思是所有文件夹及里面的子文件夹

    /*  是所有文件夹,不含子文件夹(如果在某个请求下的子文件夹请求就不会拦截,很多ajax都不会被拦截)

    /   是web项目的根目录

     

    如果我们只需要对某个特定的接口名称进行跨域操作,只需要更改path的这个匹配路径即可....

    如/api/cors/*    只允许有三层,且前两层是/api/cors

    /api/cors/**      至少有三层,且前两层是/api/cors

     

     

    如果是简单的springmvc项目(springboot或者ssm等框架的)

    1,可以通过直接注入cors的configuration来实现

     

    package com.trs.idap.config;
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.servlet.config.annotation.CorsRegistry;
    import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
    
    /**
     * Created by Administrator on 2019/2/12.
     * 描述:
     *
     * @author Young
     * @create 2019-02-12 15:58
     */
    @Configuration
    public class CorsConfig extends WebMvcConfigurerAdapter {
        static final String ORIGINS[] = new String[] { "GET", "POST", "PUT", "DELETE" };
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("/**").allowedOrigins("*").allowCredentials(true).allowedMethods(ORIGINS)
                .maxAge(3600);
        }
    }
    

     

    2,可以在方法上或者类上直接添加注解

    @CrossOrigin(origins = "*", maxAge = 3600)

    实现跨域操作

     

     

     

    展开全文
  • 注:前端项目是用h5写,在浏览器运行,因为浏览器同源策略,调用接口时会出现跨域问题,现使用nginx解决这个问题(开发环境是在mac端) 1. 安装nginx brew install nginx nginx安装完之后可以使用nginx -v...
  • 如何解决跨域问题

    2019-07-24 19:53:29
    1.jsonp跨域(前端) JSON返回是一串数据,而JSONP...www.baidu/index.html需要调用www.sina.com/server.php,可以写一个接口www.baidu.com/server.php,由这个接口在后端去调用www.sina.com/server.php并拿到返...
  • 在开发静态页面时,类似Vue应用,我们常会调用一些接口,这些接口极可能是跨域,然后浏览器就会报cross-origin问题不给调。 最简单的解决方法,就是把浏览器设为忽略安全问题,设置--disable-web-security。不过...
  • config/index.js 配置proxyTable 配置结束一定要重启项目,代码才会生效 在调用接口的时候直接用 转载于:https://www.cnblogs.com/zfdbk/p/11394326.html...
  • 在开发过程中我们请求数据有时候调用的是第三方接口,此时便会遇到一个问题:跨域限制。对于跨域问题的解释就不详细叙述了,要了解的请自行百度。一般跨域问题控制台会报这个错: 很多情况下后台会给我们做请求代理...
  • WCF Restful调用跨域解决方案

    千次阅读 2016-09-19 11:39:52
    这里以H5为例,CRM提供数据接口,移动web端来调用接口进行数据处理,这里就会涉及到一个浏览器端的跨域问题,之前避免跨域移动端会做一个接口转发层,这样中间就又多了一层,但有了CORS后这个问题就简单了。...
  • 有些用户通过调用EasyGBS接口进行二次开发时候,由于跨域问题导致用户信息在cookie中携带不过来,因此无法获取到正确用户信息,从而影响接口调用。 对于该接口调用出现问题,需要做一下优化。由于是跨域...
  • 这是为了防止某域名下的接口被其他域名下网页非法调用,是浏览器对JavaScript施加安全限制。 这个措施出发点是好,但在项目开发过程中,常常给前端开发者带来麻烦。由于页面开发中,静态资源是放在本地电脑...
  • 本篇将讲述一个小白从遇到跨域不知道是跨域问题,到知道是跨域问题不知道如何解决,再到解决跨域问题,最后找到两种方法解决ajax 跨域问题的全过程。 不知是跨域问题 起 因是这样,为了复用,减少重复开发,单独...
  • 在B系统 中用ajax调用A系统系统的接口(数据格式为json),当时特别困惑,在A系统中访问相应url可正常回返json数据,但是在B系统中使用 ajax请求同样url则一点儿反应都没有,好像什么都没有发生一样。这样...
  • Ajax解决跨域问题初探

    2015-10-27 21:24:24
    本篇将讲述一个小白从遇到跨域不知道是跨域问题,到知道是跨域问题不知道如何解决,再到解决跨域问题,最后找到两种方法解决ajax 跨域问题的全过程。不知是跨域问题 起 因是这样,为了复用,减少重复开发,单独...
  • 页面a.html域名为www.a.com嵌入页面http://www.b.com/b.html,b.html要调用a.html中js函数,由于两个页面不在一个域中,会提示没权限。如何解决问题呢,请看下面示例代码。
  • 这是为了防止某域名下的接口被其他域名下网页非法调用,是浏览器对JavaScript施加安全限制。 这个措施出发点是好,但在项目开发过程中,常常给前端开发者带来麻烦。 由于页面开发中,静态资源是放在本地...
  • 跨域问题

    2019-09-04 13:42:12
    跨域问题什么是跨域跨域原因如何解决 在为前端项目做一个以nodejs为后端的接口,在静态页面利用ajax进行请求时候,出现了跨域问题,解决之后又仔细了解了一下跨域问题。 什么是跨域 跨域是浏览器进行安全限制...
  • 当我们前端要调用跨域接口时,我们需要用代理解决跨域问题,比如Vue代理配置proxy,但是当Vue项目打包成静态文件时,他代理也就失灵了,因为代理前提是本地必须有service,本章讲一下生产环境Vue项目如何做...

空空如也

空空如也

1 2 3 4 5 6
收藏数 109
精华内容 43
关键字:

如何解决接口调用的跨域问题