精华内容
下载资源
问答
  • PHP thinkphp5 后台解决跨域问题

    千次阅读 2019-05-13 20:07:37
    做一个网站在和前端对接的时候出现了跨域的问题(跨域具体可以自己搜索),原因是我的是云服务器 我们通过在浏览器按f12然后选择console查看,发现了上图的报错。 于是在服务器端进行解决这个跨域的问题。 我们通过...

    做一个网站在和前端对接的时候出现了跨域的问题(跨域具体可以自己搜索),原因是我的是云服务器
    在这里插入图片描述
    我们通过在浏览器按f12然后选择console查看,发现了上图的报错。
    于是在服务器端进行解决这个跨域的问题。(其实前端也是可以解决跨域问题的)
    我们通过在入口文件的头部添加header来解决跨域问题
    在这里插入图片描述
    Access-Control-Allow-Origin:* 这句话的意思是允许所有的来源访问,如果要指定特定的来源,则可将*号换成该来源

    增加header的方式是没有原生php还是使用框架之分的,都是一样在头部添加!

    这里遇到遇到一个新的问题,在做好header的设置后发现还是报同样的跨域的错误
    十分奇怪
    因为我使用了tp5框架,并且我在入口文件处加了前置操作,我的前置操作在把参数接收前先对参数进行检验,看是否符合规范
    于是我去检查前置操作的那个php,之前我使用

    exit(json_encode())
    

    的方式把错误返回回去前端,为了更规范,我修改为了自定义抛出异常的方式。
    思考会不会是因为这个原因导致还是不能成功跨域
    于是把抛出异常换回了exit(json_encode())的方式,惊奇地发现竟然成功了!
    这个前置操作的php不能使用这种自定义抛出异常的原因还有待查阅。

    展开全文
  • 还有时候还在开发阶段的时候,后台代码没有上传服务器在公司的时候还能调试,但是回到家后,就不能调试了非常的不灵活。其实vue他是有个内置的小型server,你可以在配置文件里,配置你的跨域地址。废话不多说直接...

    跨域截图

    最近一些朋友问我,vue的前端能不能做跨域?之前每次前端和后台调接口的时候都很麻烦。要什么后台做跨域支持什么?有的后台技术差点的还不会做这个,还有脾气不好的还不给你搞。

    还有时候还在开发阶段的时候,后台代码没有上传服务器在公司的时候还能调试,但是回到家后,就不能调试了非常的不灵活。

    其实vue他是有个内置的小型server,你可以在配置文件里,配置你的跨域地址。废话不多说直接代码看

    vue版本是在2.5.2之前的(包括这个版本的)你要在build的文件夹下的webpack.dev.conf.js文件下devServer:{}里加上:

    proxy: {

    '/api': { //自定义

    target: 'https://你的服务器地址/api', //这里可以跟随项目实际部署服务器来

    changeOrigin: true,

    ws: true,

    pathRewrite: {

    '^/api': '' //自定义

    }

    }

    }

    2.5.2以上的版本是要自己在根目录里建立:vue.config.js文件然后:

    module.exports = {

    devServer: {

    proxy: {

    "/api": { //自定义

    target: "http://你的服务器地址/api", //这里可以跟随项目实际部署服务器来

    changeOrigin: true,

    ws: true,

    pathRewrite: {

    "^/api": ""//自定义

    }

    }

    }

    }

    }

    这样就完全不需要后台去做跨域的设置,前端完全能搞定,记得配置完成后,要重启下项目,配置才会生效。

    如果你还有其他的招数非常欢迎你来找我(微信号:nihaomeili87)考论

    展开全文
  • CORS(Cross-Origin Resource Sharing)"跨域资源共享",是一个W3C标准,它允许浏览器向跨域服务器发送Ajax请求,打破了Ajax只能访问本站内的资源限制,CORS在很多地方都有被使用,微信支付的JS支付就是通过JS向微信...

    CORS(Cross-Origin Resource Sharing)"跨域资源共享",是一个W3C标准,它允许浏览器向跨域服务器发送Ajax请求,打破了Ajax只能访问本站内的资源限制,CORS在很多地方都有被使用,微信支付的JS支付就是通过JS向微信服务器发送跨域请求。开放Ajax访问可被跨域访问的服务器大大减少了后台开发的工作,前后台工作也可以得到很好的明确以及分工,下面我们就看讲一下如何让你的SpringBoot项目支持CORS跨域。

    本章目标

    基于SpringBooot项目搭建可以站外Ajax请求访问的跨域资源服务器。

    构建项目

    使用IDEA开发工具创建一个SpringBoot项目,预先添加Web依赖即可,项目结构如下图1所示:

    9f28977e2b3e6010fe24a7fdd7b381cc.png

    图1

    CORSConfiguration

    我们只需要添加项目Web依赖就可以了,下面我们开始添加CORS的配置信息,我们创建一个CORSConfiguration配置类,如下图2所示:

    c46b453fb36ff7af6f9f277962bbc452.png

    图2

    上图2内我们的CORSConfiguration配置类继承了WebMvcConfiugrationAdaper父类并且重写了addCorsMappings方法,我们来简单介绍下我们的配置信息

    addMapping:配置可以被跨域的路径,可以任意配置,可以具体到直接请求路径。

    allowedMethods:允许所有的请求方法访问该跨域资源服务器,如:POST、GET、PUT、DELETE等。

    allowedOrigins:允许所有的请求域名访问我们的跨域资源,可以固定单条或者多条内容,如:"http://www.baidu.com",只有百度可以访问我们的跨域资源。

    allowedHeaders:允许所有的请求header访问,可以自定义设置任意请求头信息,如:"X-YAUTH-TOKEN"

    编写跨域资源请求

    我们的跨域配置到目前来说已经配置完成了,SpringBoot已经为我们内置相关配置,我们只需要重写方法修改部分参数即可,下面我们来创建一个测试跨域资源的控制器,如下图3所示:

    4e8645e2581ec2fa4493f85b93485a24.png

    图3

    在图3内的IndexController控制器内,我们仅仅添加了一个测试返回文本的内容,当然这个控制器可以处理任意业务逻辑。

    测试跨域请求

    我们在项目外创建一个index.html页面(上传码云后会在resources目录找到),页面内添加部分jquery代码,如下图4所示:

    22c3cb45e37e230a34e2612121404959.png

    图4

    我们引用了在线的jquery代码,并且在页面加载的时候为id=cors的输入按钮绑定点击事件,点击按钮时就会请求我们的/cors跨域资源路径,下面我们来运行项目测试下跨域请求,项目运行日志如下图5所示:

    82555576505602654595cbdbc5df39db.png

    图5

    可以看到上图5内项目启动时SpringBoot内置的SpringMVC已经把我们的/cors添加到映射集合,我们打开之前编写的index.html网页,界面效果如下图6所示:

    9456cf0c83f5b8a480290c4d12dce17b.png

    图6

    接下来我们点击“CORS跨域测试”按钮,查看下效果,如下图7所示:

    26387d68cc0bafb8f535749a06b010eb.png

    图7

    上图7内可以看到,界面给我返回了我们/cors路径返回的文本内容,证明我们的ajax请求完美的通过跨域资源库访问了开放跨域的资源路径。

    下面我们来把我们的跨域配置注释掉,重启项目后刷新index.html再次点击“CORS跨域测试”按钮,界面输出效果如下图8所示:

    710bd7a91f030a79ab90336871698d22.png

    图8

    可以看到我们点击后并没有获取到返回内容,而是给我们提示了异常,告诉我们无法加载资源。

    本章总结

    本章简单讲解了SpringBoot项目对CORS请求的处理,完全自定义处理请求路径,可对请求头信息以及请求的域名进行控制。

    展开全文
  • 需要从客户端(网页)批量下载服务器存储的图片到本地,但是服务器只存储了图片url地址,图片本身存在于别的服务器上,当我们请求图片的时候,会出现跨域问题,尽管前端解决了跨域,但是还需要服务器允许跨域请求资源,...

    问题描述

           项目中有一个需求,需要从客户端(网页)批量下载服务器存储的图片到本地,但是服务器只存储了图片url地址,图片本身存在于别的服务器上,当我们请求图片的时候,会出现跨域问题,尽管前端解决了跨域,但是还需要服务器允许跨域请求资源,因为有多个服务器所以从服务器端解决不太理想。

    解决思路

           首先,可以通过后台JAVA方法,把别的服务器上的图片下载到项目服务器(后台请求没有跨域的问题),下载到本地之后,在通过前端轮子从项目服务器下载就不会跨域了。

    一. 后台下载

     public EiInfo ExportPhoto(EiInfo inInfo) {
        EiInfo outInfo = new EiInfo();
        HashMap map=new HashMap();
        //从前端获取查询条件
        map.put("number",inInfo.getBlock("inqu_status").getRow(0).get("number"));   
        map.put("jgsjStart",inInfo.getBlock("inqu_status").getRow(0).get("jgsjStart"));
        map.put("jgsjEnd",inInfo.getBlock("inqu_status").getRow(0).get("jgsjEnd"));
        map.put("deviceaddress",inInfo.getBlock("inqu_status").getRow(0).get("deviceaddress"));
        map.put("csys",inInfo.getBlock("inqu_status").getRow(0).get("csys"));
        map.put("hpys",inInfo.getBlock("inqu_status").getRow(0).get("hpys"));
        map.put("cerType",inInfo.getBlock("inqu_status").getRow(0).get("cerType"));
        map.put("fxbh",inInfo.getBlock("inqu_status").getRow(0).get("fxbh"));
    
    
    	//获取需要导出的数据集
        List<HashMap> list = dao.query( "BMGS02.queryJgclPhoto", map);
    
        List result = list;
        int num=0;
        ArrayList arrayList = new ArrayList();
        //遍历数据集,获取每条数据的图片地址 
        for(int i=0;i<result.size();i++){
            BM05 bm05  = new BM05();
            bm05.fromMap((Map) result.get(i));
            int i1 = bm05.getTpurl().lastIndexOf("/");   //因为图片地址很长,我们需要找到图片名称并截取出来,图片下载到服务器上之后重新拼接上服务器IP形成新的地址
            String substring = bm05.getTpurl().substring(i1+1, bm05.getTpurl().length()); 
            arrayList.add(substring);
            
    		//调用根据url下载图片的方法,需要传下载的url,下载路径(建议在项目所在文件夹创建文件,因为浏览器保护没办法直接访问到项目服务器的本地文件,但是我们可以访问项目文件),图片名称
            boolean b = httpDownload("图片地址", "图片下载地址" + substring);  
    
            if(b){
                num+=1;
            }
        }
        outInfo.set("photoList",arrayList);
    
        return outInfo;
    }
    public static boolean httpDownload(String httpUrl, String saveFile) {
        // 1.下载网络文件
        int byteRead;
        URL url;
        try {
            url = new URL(httpUrl);
        } catch (MalformedURLException e1) {
            e1.printStackTrace();
            return false;
        }
    
        try {
            //2.获取链接
            URLConnection conn = url.openConnection();
            //3.输入流
            InputStream inStream;
            inStream = conn.getInputStream();
            //3.写入文件   
            FileOutputStream fs = new FileOutputStream(saveFile);
    
            byte[] buffer = new byte[1024];
            while ((byteRead = inStream.read(buffer)) != -1) {
                fs.write(buffer, 0, byteRead);
            }
            inStream.close();
            fs.close();
            return true;
        } catch (FileNotFoundException e) {
            e.printStackTrace();
            return false;
        } catch (IOException e) {
            e.printStackTrace();
            return false;
        }
    }
    
    //删除指定文件夹下的所有文件,避免下载图片过多导致服务器内存不足
    public EiInfo deletePhoto(EiInfo inInfo) {
        delAllFile(文件路径); 
    
                return  inInfo;
    }
    public static boolean delAllFile(String path){
    
        boolean flag = false;
    
        File file = new File(path);
    
        if(!file.exists()){
    
            return flag;
    
        }
    
        if (!file.isDirectory()) {
    
            return  flag;
    
        }
    
        String[] tempList = file.list();
    
        File temp = null;
    
        for (int i = 0; i < tempList.length; i++) {
    
            if (path.endsWith(File.separator)) {
    
                temp = new File(path  + tempList[i]);
    
            } else {
    
                temp = new File(path + File.separator + tempList[i]);
    
            }
    
            if (temp.isFile()) {
    
                temp.delete();
    
            }
    
            if (temp.isDirectory()) {
    
                delAllFile(path + "/" + tempList[i]);//先删除文件夹里面的文件
    
    //                delFolder(path + "/" + tempList[i]);//再删除空文件夹
    
                flag = true;
    
            }
    
        }
    
        return flag;
    
    }
    

    二.前端下载

    //引入需要的js
    <script src="../static/js/jszip.js"></script>
    <script src="../static/js/FileSaver.js"></script>
    
    //先从服务器上下载图片 然后清除服务器上缓存下来的图片
          var photoList=eiInfo.get("photoList");  //获取服务器上新的图片地址列表
          var photoArr=[];
          for(var i=0;i<photoList.length;i++){ //遍历图片列表
          	  //根据图片名称 拼接图片对象
              photoArr.push({url:"http://localhost:8080/rc/static/downPhoto/"+photoList[i],name:photoList[i]}) 
          }
          //调用批量下载图片的方法
           FunLib.download(photoArr);
    
    	//   下载图片
    var FunLib = {     //该方法需要服务器支持跨域 或者从跨域的服务器上获取图片到本地服务器
        // 图片打包下载
        download: function (images) {
            FunLib.packageImages(images)
        },
        // 打包压缩图片
        packageImages: function (imgs) {
            var imgBase64 = []
            var imageSuffix = [] // 图片后缀
            var zip = new JSZip()
            var img = zip.folder("images")
    
            for (var i = 0; i < imgs.length; i++) {
                var src = imgs[i].url
                var suffix = src.substring(src.lastIndexOf("."))
                imageSuffix.push(suffix)
                FunLib.getBase64(imgs[i].url).then(function (base64) {
                    imgBase64.push(base64.substring(22))
                    if (imgs.length === imgBase64.length) {
                        for (var i = 0; i < imgs.length; i++) {
                            img.file(imgs[i].name + imageSuffix[i], imgBase64[i], {base64: true})
                        }
                        zip.generateAsync({type: "blob"}).then(function (content) {
                            saveAs(content, "images.zip")
                            downPhoto=true;
                        })
                    }
                }, function (err) {
                    console.log(err)
                })
            }
        },
        // 传入图片路径,返回base64
        getBase64: function (img) {
            var image = new Image()
            image.src = img+'?time=' + new Date().valueOf();
            image.crossOrigin = '*';
            var deferred = $.Deferred()
            if (img) {
                image.onload = function () {
                    var canvas = document.createElement("canvas")
                    canvas.width = image.width
                    canvas.height = image.height
                    var ctx = canvas.getContext("2d")
                    ctx.drawImage(image, 0, 0, canvas.width, canvas.height)
                    var dataURL = canvas.toDataURL()
                    deferred.resolve(dataURL)
                }
                return deferred.promise()
            }
        }
    }
    

    三.过程中的坑
    1.跨域不仅需要前端解决,还需要资源服务器允许跨域
    2.图片下载到项目服务器时,如果下载到本地目录里,那么前端无法通过ip:8080路径访问到图片。所以需要在项目文件夹里新建文件存放图片。
    3.tomcat文件新增图片资源的时候 需要加载图片,不然虽然可以在文件里看到图片,但是再打开的项目上无法访问到图片。把文件建在构建好的文件里,就不会出现tomcat需要时间加载的问题了。
    4.下载完图片记得删除,不然可能占太多服务器内存。

    展开全文
  • 请求头自定了其他字段,但后台程序中未允许带有此字段
  • 什么是跨域 跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略...CORS背后的基本思想是使用自定义的HTTP头部允许浏览器和服务器相互了解对方,从而决定请求或响应成功与否。 cors与jsonp对比 CORS与J
  • 调用后台的接口跨域问题

    千次阅读 2016-11-11 23:54:59
    a)让后台在程序里面允许,ajax跨域(不安全) b)把写好的代码直接部署到服务器上查看效果(稍微麻烦点,需要频繁的提交代码,可能会跟别的同事代码冲突) c)把所有的代码都下载到本地,本地开启服务器调试(需要在...
  • 加粗样式### 什么是跨域? 域名、协议、ip地址、端口任何一个不-一样, 就会出现跨域问题 解决跨域? jsonp --使用script的src发送 只能get请求 jsonp 前端代码 ...cors后台设置允许跨域需要后台 设置允许
  • 最近做一个前后端分离的项目,后台.Net 进行开发,使用...查了下资料了解到浏览器不允许cookie跨域传递,导致登陆请求写入cookie的sessionid 在下一个请求发起的时候并不能带出来发送给服务器,从而导致每次的...
  • 最近做一个前后端分离的项目,后台.Net 进行开发,使用session来...查了下资料了解到浏览器不允许cookie跨域传递,导致登陆请求写入cookie的sessionid 在下一个请求发起的时候并不能带出来发送给服务器,从而导致每...
  • 一般的web项目都是前台页面和后台类放在一个项目文件里,前后台交互不存在跨域问题。 但是对于前后台分离的项目,由于浏览器的...它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的...
  • 本来在诸如axios之类的网络请求参数里面配置withCredentials: true,就可以解决跨域问题的,但是现在浏览器比如chorme有做了新的跨域限制,比如要服务器端配置允许跨域才行,详见跨域问题解决,是英文的,看起来需要...
  • 一:在前后台的配合中,由于有时候会出现后台不允许请求的问题,因为二者存在跨域问题,所以解决方案...1:后台设置允许跨域。 2:前台设置代理服务器。 第二种的操作: 1:新建一个vue.config.js的文件 2:如下 ...
  • 浏览器使用的chrome,安装了cors插件(开启允许跨域请求) 然后访问远程服务器提供的服务的时候,浏览器console 输出如下形式的错误信息: 问题1.OPTION: xxxxxx url地址 问题2.XMLHttpRequest cannot load...
  • 跨域

    2021-03-29 10:58:14
    不过,由于受到浏览器的限制,该方法不允许跨域通信。如果尝试从不同的域请求数据,会出现安全错误。 跨域是什么 所有的浏览器都遵守同源策略,同源是指协议、域名和端口号都一致。这个策略能够保证一
  • 1、XMLHttpRequest升级版已经实现了跨域请求。...表示某个域下允许跨域访问。 2、IE:需要使用XDomainRequest()。同样需要在后台设置:response.addHeader("Access-Control-Allow-Origin","*"); ...
  • 前后端分离的话,经常是前端代码部署的服务器后台部署的服务器不一样,域名也不一样。这个时候就会有跨域问题。我们可以通过前端的处理方式jsonp(基于js的无视域名调用和callback回调封装),但是这里只说后台...
  • 最近项目需要实现XmlHttp的POST方法到另一服务器上的页面进行数据的更新,可是IE会提出“该页正在访问其控制范围之外的信息,是否继续?... 原来由于浏览器的安全限制,网络连接的跨域访问时不被允许的。...
  • 最近项目需要实现XmlHttp的POST方法到另一服务器上的页面进行数据的更新,可是IE会提出“该页正在访问其控制范围之外的信息... 原来由于浏览器的安全限制,网络连接的跨域访问时不被允许的。我们不能在浏览器端直接...
  • 允许服务器端生成script tags返回至客户端,通过javascript callback的形式来实现站点访问。 JSONP是一种script tag的注入,将server返回的response添加到页面实现特定功能。 2.JSONP由来 要解释JSONP的来由,先...
  • vue-使用Proxy代理跨域

    千次阅读 2020-04-21 01:43:49
    2 cors 后台设置允许跨域 需要后台设置 允许跨域 ​ 所有后台语言 都可以设置 3 服务器代理,服务器之间不存在跨域问题 vue在 vue.config.js 可以配置重写webpack代理 webpack代理原理: 说...
  • 解决: 1、参考:cros跨域session前后...然后我再在js全局加上了那个允许跨域的设置,另外将浏览器服务器设置为同源异端(),发现后台可以接收到session了;不过返回不了值回前台。 2、参考:session后端相关配置问题...
  • 允许服务器端生成script tags返回至客户端,通过javascript callback的形式来实现站点访问。 JSONP是一种script tag的注入,将server返回的response添加到页面实现特定功能。 2.JSONP由来  要解释JSONP的来由...
  • ajax跨域

    2017-03-31 16:36:01
    js出于安全方面的考虑,不允许跨域调用其他页面的对象, 主域名、子域名、协议、端口号相同的页面调用不算跨域, 主域名、子域名、端口号、协议中任意一个不同的调用叫做跨域 处理跨域方法一——代理 1.北京服务...
  • vue跨域

    2018-03-14 13:23:20
    在config目录下打开index.js,把port的8080改成8081port: 8081数据请求,后台允许跨域,所有需要修改配置在在config目录下打开index.js,添加以下代码dev: { // Various Dev Server settings host: 'localhost', /...

空空如也

空空如也

1 2 3 4 5 ... 15
收藏数 295
精华内容 118
关键字:

服务器后台允许跨域