精华内容
下载资源
问答
  • Server Proxy,顾名思义,在服务器端设置一个代理,由服务器端向跨域的网站发出请求,再将请求结果返回给前端,成功避免同源策略的限制。 二、客户端和服务端代码 1、在localhost:81/a.html中,向同源的某个代理...

    一、基本原理

    Server Proxy,顾名思义,在服务器端设置一个代理,由服务器端向跨域的网站发出请求,再将请求结果返回给前端,成功避免同源策略的限制。

    二、客户端和服务端代码

    1、在localhost:81/a.html中,向同源的某个代理程序发出请求;

    $.ajax({
      url:'/proxy.php?name=camille&age=18',   //服务器端的代理程序
      type:'GET',
      success:function (data){
    
      }
    })

    2、在代理程序proxy.php中,向非同源下的服务器发出请求,获得请求结果,将结果返回给前端。

    <?php 
        $name = $_GET['name'];
        $age = $_GET['age'];
        $crossUrl = 'http://b.com/sub?name='.$name;   //向其他域发出请求
        $res = file_get_contents($crossUrl);
        echo $res; 
     ?>

     

    转载于:https://www.cnblogs.com/camille666/p/cross_domain_server_proxy.html

    展开全文
  • 根据一个url路径来获取用户的状态,实际上是发送了一个servlet请求给服务器,然后server端通过数据流打印到前端。因此使用iframe能够显示前端的状态(图片或者是文字),现在的问题是开发人员想获取到我们写的用户...

    在工作中遇到了这么一个问题?根据一个url路径来获取用户的状态,实际上是发送了一个servlet请求给服务器,然后server端通过数据流打印到前端。因此使用iframe能够显示前端的状态(图片或者是文字),现在的问题是开发人员想获取到我们写的用户状态,即在iframe中显示的文字,由于之前的URL已经指定了服务器的IP地址,因此在开发人员的应用中是无法访问这个iframe的,因为IP地址不一致,已经跨域了,所以不能访问。

     

    我的解决办法 —— 利用apache的代理方式来访问?

    1、在本机中安装apache,然后配置代理

    ProxyPass /http-plugins/ http://172.16.14.81:9090/plugins/

    备注:标示在apache访问/http-bind/类似于访问 http://172.16.14.81:7070/http-bind/目录下的内容

     

    2、在apache容器下添加一个页面,里面包含一个iframe标签,将src以相对路径的方式访问,apache实际上是会访问其他IP地址的路径

    <iframe id="test_iframe" name="test_iframe" src="/http-plugins/presence/status?jid=abc@jdchat&type=text" ></iframe>

    或者

    <iframe id="test_iframe" name="test_iframe" src="http://127.0.0.1/http-plugins/presence/status?jid=abc@jdchat&type=text" ></iframe>

    备注:这两种方式的效果是一样的,都没有任何问题

     

    apache根据url实际上访问的是下面的地址

    <iframe id="test_iframe" name="test_iframe" src="http://172.16.14.81:9090/plugins/presence/status?jid=abc@jdchat&type=text"></iframe>

     

    3、访问iframe里面的内容

    function init() {
    //使用Jquery的方式访问
        alert($("pre", document.getElementById('test_iframe').contentWindow.document).attr("innerHTML"));
    //使用js原始代码访问
        //alert(window.frames["test_iframe"].document.getElementsByTagName('pre')[0].innerHTML);
        //alert(document.getElementById('test_iframe').contentWindow.document.body.innerHTML);
    }

     

    备注:我开始测试是将init方法放在jquery中的document.ready方法中运行的,在IE中能够正常显示,但是在chrom中无法访问,经过反复测试,将这个方法抽出来,使用按钮事件来触发,结果显示正确。

    <input type="button" value="登录" id="hb" οnclick="javascript:init();" style="font-size: 12px;"/>

     

    结论:在IE中访问iframe中的内容实用是单线程,数据是从上往下运行,如果IFRAME中的数据没有获取到会阻塞,而chrome实际上上采用多线程的方式加载内容,页面的内容已经全部OK了,但是还是访问不到iframe里面的数据

     

    展开全文
  • 服务器代理 【同源策略的释义】:同源策略就是规定端口号一样域名一样,只能访问同源的内部资源. ...下面是服务器代理的方案一代码 const cors=require("cors") const axios=require("axios") const

    服务器代理

    【同源策略的释义】:同源策略就是规定端口号一样域名一样,只能访问同源的内部资源.
    浏览器受到同源策略的限制所以我们需要想办法解决跨域问题,下面我就来介绍服务器代理.
    在这里插入图片描述
    原理就是服务器之间的请求没有跨域限制,所以我们自己写一个服务器。像自己写的服务器发请求,然后用我们写的服务器像另一个服务器发请求,返回给我们写的服务器最后返回给我们的浏览器前端。

    下面是服务器代理的方案一代码

    const cors=require("cors")
    const axios=require("axios")
    const express=require("express")
    const path=require("path")
    const app=express()
    app.use(express.static("./"))
    app.get("/ky",(req,res)=>{
        res.send({err:0,msg:"访问ok!"})
    })
    // 我们在自定义的服务器当中一定要做cors允许跨域的操作
    // 我们在后端node.js当中写一个后端服务器A,我们利用服务器A像服务器B发起请求不受同源策略限制的特点
    // 在服务器A当中使用axios模块向服务器B发请求,在服务器A中接收到服务器B返回的响应,然后在服务器A当中响应给浏览器
    app.get("/cors",(req,res)=>{
        var url="https://store.lining.com/shop/cdns/goods-ARHQ061_1,ARLQ031_2,ARHQ079_6,ARBQ041_1,ARHQ227_3,AFDQ181_2,AYKM057_2,AYKP065_1,ARBQ038_2,ARLQ034_1,ARLQ044_2,ARHQ336_1,ARKQ014_1,AREQ034_2,ARHQ094_1,ARHQ088_1,ARHQ178_3,AREQ022_1,ARBQ036_1,ARBQ002_2,AFDQ126_2,AULQ092_3,AULQ088_2,ABAQ041_2,ABAQ035_9,ABAP071_3,ABAP095_1,ABAP075_2,ABAP019_2,ABAQ059_2,ABAP129_6,ABAQ061_3,ABAQ025_1,ABAQ055_5,ABAP057_3,ABAQ009_3,ABAP067_5,ABAQ003_1,ABAN065_2,ABAQ011_4,AWDQ511_2,AWDQ501_3,AWDQ332_1,AWDQ342_2,AWDQ493_1,AWDQ334_1,AWDQ091_2,AWDQ062_3,AWDQ051_4,AWDQ097_4,AKXQ191_3,AKLQ497_2,AYKQ389_2,AYKQ218_2,AKLQ505_2,ABPQ005_1,ABPP025_3,ABAQ069_4,ABAP105_6,ABPQ015_5,ABAQ031_8,ABAN047_1,AWDQ203_1,AWDQ167_1,AWDQ189_1,AWDQ173_1,AWDQ175_7,AYKQ061_1,AKLQ157_1,AKLQ155_1,AFDQ345_3,AYKQ349_1,AFDQ353_1,AFDQ817_1,AFDQ805_2,AFDP607_1,AUDQ011_1,AUDQ015_1,AUDP063_1,AWDP705_4,AWDQ121_3,AWDQ023_3,AWDQ109_5,AWDQ433_1,AKLP869_4,AKLQ253_1,AYKQ163_1,AFDQ236_1,AWDQ054_4,AWDQ052_3,AWDQ114_1,AWDQ108_3,AWDQ116_1,AWDQ098_2,AWDQ126_3,AWDP476_2,AWDQ372_3,AYKQ088_1,AKYQ016_1,AKLP638_3,AKLQ048_1,AYKP038_2,KFDQ078_2,KULQ014_1,KMBP004_1,KWDP022_2,KTLQ008_4,KFDP028_1,KFDP008_1,KFDN032_1,KFDP074_1,KWDP044_1,KWDP018_2,KWDP026_2,KKXP026_2,KKLP082_3,KKLP046_2,KKLP008_2,KKLQ008_3,YWDQ264_1,YWDQ178_4,YKFP108_17,YKFQ096_1,YKBP058_1,YKFQ042_3,YKBP001_5,YKFP086_1,YKFP122_7,YKFQ052_1,YKBP034_15,YKFQ082_7,YWDQ278_2,YWDQ182_3,YKLQ148_4,YKLQ231_1,YKLQ152_1,YKFQ092_4,YKCQ242_2,YKCQ274_34,YKCQ102_4,YKCQ244_2,YKCQ008_4,YKCQ114_2,YKCP168_2,YKCP004_12,YKFP072_2,YWDQ258_4,YWDQ186_7,YWDQ002_1,YKLP238_1,YKLQ002_1.js"
        axios.get(url).then((data)=>{
            var t=typeof data
            console.log(t);
            // 记住一个操作一般请求后端服务器B的东西,返回的是一个对象data,但是我们需要的数据通常都是data.data
    res.send(data.data)
        })
    
    })
    
    app.listen(3001,()=>{
        console.log("服务器端口3001已经开启!");
    })
    

    下面是服务器代理的方案二代码

    Html代码如下↓

    <body>
        <button id="dl">服务器代理</button>
    </body>
    <script>
        // targetUrl为目标地址
        // var targetUrl="https://www.duitang.com/napi/blog/list/by_filter_id/?include_fields=top_comments%2Cis_root%2Csource_link%2Citem%2Cbuyable%2Croot_id%2Cstatus%2Clike_count%2Csender%2Calbum%2Creply_count&filter_id=%E5%A9%9A%E7%BA%B1%E5%A9%9A%E7%A4%BC&start=24&_=1599136332010"
        var url =
            "http://localhost:5201/dt/napi/blog/list/by_filter_id/?include_fields=top_comments%2Cis_root%2Csource_link%2Citem%2Cbuyable%2Croot_id%2Cstatus%2Clike_count%2Csender%2Calbum%2Creply_count&filter_id=%E5%A9%9A%E7%BA%B1%E5%A9%9A%E7%A4%BC&start=24&_=1599136332010"
        dl.onclick = function () {
            console.log(1);
            var xhr = new XMLHttpRequest()
            xhr.open("get", url, true)
            xhr.send()
            // xhr.onreadystatechange = function () {
            //     // 每次 readyState 改变的时候都会触发该事件
            //     // 我们就在这里判断 readyState 的值是不是到 4
            //     // 并且 http 的状态码是不是 200 ~ 299
            //     if (xhr.readyState === 4 && /^2\d{2}|$/.test(xhr.status)) {
            //         // 这里表示验证通过
            //         // 我们就可以获取服务端给我们响应的内容了
            //         console.log(xhr.responseText)
            //     }
            // }
            xhr.onload = function () {
                console.log(xhr.responseText)
            }
    
        }
    </script>
    

    服务器js代码如下↓

    const express = require("express")
    const app = express()
    const cors=require("cors")
    app.use(cors())
    const {
        createProxyMiddleware
    } = require('http-proxy-middleware');
    app.get("/jsonp", (req, res) => {
        // 如果你传入的字段属性名是callback结构callback,如果是别的就结构别的,结构什么看你请求地址的回调属性名
        var {
            callback
        } = req.query
        var data = {
            boy: "张亿",
            gril: "马嘉宁",
            love: "★"
        }
        // 返回一个全局的回调函数调用
        // 回调函数内部参数需要转成JSON字符串并且配合模板字符串
        // 把data对象当做一个变量传入回调函数的实参当中
        res.send(`${callback}(${JSON.stringify(data)})`)
    })
    var dtTargetUrl="https://www.duitang.com/napi/blog/list/by_filter_id/?include_fields=top_comments%2Cis_root%2Csource_link%2Citem%2Cbuyable%2Croot_id%2Cstatus%2Clike_count%2Csender%2Calbum%2Creply_count&filter_id=%E5%A9%9A%E7%BA%B1%E5%A9%9A%E7%A4%BC&start=24&_=1599136332010"
    // 同一个服务器可以配置代理多个网站
    // 下面是使用中间件createProxyMiddleware并配置地址与替换
    var dtMiddleware=createProxyMiddleware({
        // 会把发请求的/dt前面的地址替换成target里写的地址
        "target": "https://www.duitang.com",
        "changeOrigin": true,
        // "^/dt":"/"这句代码的意思是地址中的/dt替换成/
        "pathRewrite":{
            "^/dt":"/"
        }
    })
    // 如下接口使用中间件
    app.use('/dt',dtMiddleware);
    // 如上29行代码发送依靠5201这个服务器端口代理玩之后会自动返回给前端数据
    app.listen(5201, () => {
        console.log("服务器5201端口已经被成功开启!");
    })
    
    展开全文
  • jsonp 前端代码 <!-- 发送请求给abc.php -->| <!-- jsonp 就是script src --> <script src="http:/ /www .baidu. com/ abc . php"></script> cors后台设置允许跨域需要后台 设置允许

    加粗样式### 什么是跨域?
    域名、协议、ip地址、端口任何一个不-一样, 就会出现跨域问题

    解决跨域?

    1. jsonp --使用script的src发送 只能get请求

    jsonp 前端代码

    <!-- 发送请求给abc.php -->|
    <!-- jsonp 就是script src -->
    <script src="http:/ /www .baidu. com/ abc . php"></script>
    
    
    1. cors后台设置允许跨域需要后台 设置允许跨域 所有后台语言都可以设置

    这里是后端是设置

    <?php
    // 设置头部
    header( ' Access - Control -Allow-Origin:*'); // *代表允许任何网址请求
    header( ' Access-Control-Allow-Methods :POST , GET, OPTIONS,DELETE'); //请求方式
    echo ' 成功请求
    ?>
    
    1. 服务器代理

    服务器代理原理图在这里插入图片描述

    配置代理

    现在前端vue框架是可以自己设置服务器代理的proxy
    配置就行
    vue在vue.config.js可以配置重写webpack

    **以默认vue http:// localhost:8080 请求http://122.51.238.153 为例

    .vue文件中发送请求

    async  getAll(){
    //
    http:// localhost :8080/
    //请求http://122.51.238.153/ getok . php 
    **let res=await this. $http. get("http://122.51.238.15"//请求会出现跨域问题**
    let res=await this. $http. get("http://api/getok.php"//请求不会出现跨域问题
    console. log(' 
    res',res)
    I
    // let res=await this . $http . get("/api/ getok . php") 
    // console.log('res' ,res)
    },
    
    

    vue. config.js配置代理

    下面的配置就是vue脚手架帮你开启了一个隐藏的服 务器

    // vue. config.js
    //这些配置大家复制就行基本都是写死的
    
    //这个配置就是vue脚手架帮你开启了一个隐藏的服 务器
    //帮你转发了
    
    module .exports = {
    //修改的配置配置proxy 服务器代理
    devServer: {
    proxy: {
    
    // 如果你的地址以/api 开头他就会请求到http://122.51.238.153
    // "/api/ getok . php" => // http://122.51.238.153/ getok . php
    
    /api': {
    target:' http:/ /122.51.238.153',
    change0rigin: true, 
    // WS: true,
    pathRewrite: {
    '^/api'://I请求的时候/api就会替换成|
                      }
                 }
              }
          }
    
    
    展开全文
  • 在vue.config.js中设置如下代码: // vue.config.js // 这些配置 大家复制就行 基本都是写死的 // 配置之后重启 ... // 修改的配置 配置 proxy 服务器代理 // "/api/getok.php" // http://122.51...
  • 使用的是服务器代理方式解决跨域 第一步 在vue项目根目录中创建文件夹vue.config.js文件 (根目录就是项目名称目录就是根目录,直接在项目名称上右击创建文件) 注意:文件名是固定的vue.config.js 第二步 打开文件vue....
  • var express = require('express'); var request = require('request'); var app = express(); app.use('/', function(req, res) { var url = 'http://www.baidu.com' + req.url; req.pipe(request(url)).pi
  • 解决API跨域问题 get请求 一般的说,我们GET请求跨域是用jsonp。但遇到一些其他情况(比如POST)或者因为API的其他原因无法进行跨域。我们可以使用转发的手段实现跨域。...代码实现//引入express框架
  • 跨域篇-nginx 反向代理跨域处理 1 连接上你的服务器找到你的nginx配置文件,一般在etc/nginx/nginx.conf 2 sudo vim nginx.conf 打开你的配置文件 找到 http 修改代码如下 http { ...... add_header Access-...
  • 02:利用nginx反向代理解决前端跨域请求后台接口问题;01、利用nginx部署web前端项目(所谓纯前端,html+js)首先创建一个前端项目,在这里为演示方便,我的前端项目只有一个html(test.html),直接贴代码如下:&...
  • 设置接口为api开头,设置target为要访问的地址(比如后台开发人员的ip地址),changeOrigin为true表示跨域访问,其他代码不用改。 proxyTable: { '/api': { target: 'http://10.112.27.66:8080', // 真...
  • 前端解决跨域代理服务器的方法 常用共三种: 服务端解决: cors–—实际开发最常用 前端解决: 代码proxy ––开发时常用, 如果发布成产品 不会使用! 前端+后端共同解决: jsonp ––原理是 script 不会被 同源策略...
  • 用nginx反向代理实现跨域,是最简单的跨域方式,而且支持所有浏览器,支持session,不需要修改任何代码,并且不会影响服务器性能,只需要修改nginx的配置即可。在nginx服务器上配置多个前缀来转发http/https请求到多...
  • 问题: 只能代理一个服务器 方案二: 利用客户端代理中间件(http-proxy-middleware)完成,官网给了新的使用方式,在src下新建文件setupProxy.js加下面代码,无需单独应用,webpack会自动引入文件。 npm install ...
  • 后端使用node搭建的简易服务器。 1.前段代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-...
  • Vue3.0 axios跨域请求代理服务器配置

    千次阅读 2019-05-10 17:42:06
    参考周家大小姐.... 首先安装axios npm install axios 然后在vue.config.js文件下配置如下代码 (若没有vue.config.js文件可以自己创建这个文件) module.exports = { devServer: { ...
  • vue 设置代理跨域

    千次阅读 2018-05-10 15:59:07
    今天搭了一个环境,但是设置代理跨域的时候一直出错,这可能跟今天服务器不稳定有关联。下路放设置代码changeOrigin是设置是否跨域的。如果不涉及跨域可以去掉这一行,target则是代理地址假如你访问的接口地址叫做...
  • 1.定义 跨域是指a页面想获取b页面资源,如果a、b页面的协议、域名、端口、子域名不同,所进行的访问行动都是跨域的,而浏览器为了安全问题一般都限制了...现在A网站的页面想去访问B网站的信息,A网站页面的代码如下
  • 跨域请求可以通过JSONP实现,缺点是需要修改被请求的服务器代码进行配合,稍显麻烦通过在自己服务器上配置nginx的反向代理,可以轻松实现跨域请求 思路 示例服务器A中有一个页面,想请求服务器B中的api地址...
  • 但是由于浏览器的安全策略的限制,ajax不能调用不同源的接口或者资源,虽然跨域的解决方案有很多种,但是最直接不需要修改代码的方法是使用nginx反向代理,其配置如下: 在nginx的nginx.conf 文件的http配置块里加
  • 概述 Web 程序最初的目的就是将信息(数据)放到公共的服务器,让所有网络用户都可以通过浏览器访问。 在此之前,我们可以通过以下几种方式让浏览器发出对服务端的请求,获得服务端的数据: 地址栏输入地址,回车,...
  • 配置跨域代理 Nginx Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器,同时也提供了IMAP/POP3/SMTP服务。Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru站点(俄文:Рамблер)开发的,...
  • 而现在的大多数解决方案都是用标签可以跨域访问的这个漏洞或者是技巧去完成,但都少不了目标服务器做相应的改变,而我最近遇到了一个需求是,目标服务器不能给予我一个header,更不可以改变代码返回个script,所以前...
  • webpack设置服务器代理详解

    千次阅读 2018-08-08 21:45:17
    服务器代理的作用 解决跨域: 1. 原理: 利用服务器访问服务器没有跨域问题的原理 2. 请求过程:先向代理(同源)服务器发起请求,再由代理(同源)服务器请求外部服务器 代理服务器的搭建 安装 ...
  • 最近在开发当中遇到的一个问题:我在我的机器上做好了页面,当我使用ajax请求访问另一台机器的后端服务器时,由于跨域的问题无法进行数据对接调试,后来利用node搭建代理服务器解决了这个问题,特地记录一下。...
  • 今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题。于是想用代理的方式来解决这个跨域问题。 什么是跨域?... 服务器端的代理页面: 代码如下: <!DOCTYPE html PUB
  • 一、你需要准备的知识储备 运用node的包管理工具npm 安装插件、中间件的基本知识;...最重要的一点就是知道怎么产生的跨域,要是不知道怎么产生的跨域,如何知道需要去破解它呢? 二、实例的代码分析 场景分析,...
  • vue 跨域 反向代理

    千次阅读 2018-03-12 09:41:37
    ) 是一个高性能的 HTTP 和 反向代理 服务器,也是一个 IMAP/POP3/SMTP 代理服务器.Nginx 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的,它已经在该站点运行超过两年半了.Igor 将源代码以类BSD许可证...

空空如也

空空如也

1 2 3 4 5 ... 16
收藏数 307
精华内容 122
关键字:

服务器代理跨域代码