跨域访问接口

最新推荐文章于 2024-08-29 21:55:49 发布
最新推荐文章于 2024-08-29 21:55:49 发布
阅读量124 收藏
点赞数 3
文章标签： elasticsearch
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45235159/article/details/134547330
版权

关键点

布置一个html用来做展示画面

同项目下布置一个php文件用来做跳板

访问Elastic search 布置的数据接口

html代码(index.html)(1)

下上url为docker项目发布后的地址
提示：http://192.163.312.321:321/demo/elastic_search/elastic_search.php
其中总项目名称为:elastic_search
其中php项目名称为:elastic_search.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<!-- copy -->
<meta name="description" content="{$articles.desc}" />
<meta name="keywords" content="{$articles.keywords}" />
<!-- copy -->

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="./js/jquery-3.3.1.min.js"></script>
<script>
// encodeURIComponent为编译方法,用于处理参数中中文被乱码的问题，需要decodeURIComponent()解码。
// https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent
    function Search() {
       $.ajax({
           url: "http://192.163.312.321:321/demo/elastic_search/elastic_search.php",
           type: "GET",
           data: {
               "key":encodeURIComponent($("#selectvalue").val())
           },
           contentType: "application/x-www-form-urlencoded; charset=UTF-8",
           dataType: "json",
           success: function(response) {
               console.log("Response:", response);
               $("#content").html(response['hits']['hits'][0]['_source']['column2'])
               console.log(response['hits']['hits'][0]['_source']['column2']);
           }
       });
   }
   </script>
</head>
<body>
    <div>
        <label>中文:</label> <input style="width: 100px;" type="text" id="selectvalue"></input> <button onclick="Search()">检索</button>
        <br/>
        日文：<div id="content"></div>
     </div>
</body>
</html>

PHP代码(elastic_search.php)(2)

是通过Elastic search搭建到docker上得服务接口。(3)
http://本地ip:9200/test/_search

<?php
$url = "http://191.167.321.321:9200/test/_search?q=column4:".rawurlencode(urldecode($_GET['key']));
// 初期化curl
// urldecode方法解析url加密
if(urldecode($_GET['key'])){
// 发送请求服务 返回查询后的数据
    $curl = curl_init();
    curl_setopt_array($curl, array(
        CURLOPT_URL => $url,
        CURLOPT_RETURNTRANSFER => true,
        CURLOPT_MAXREDIRS      => 10, 
        CURLOPT_TIMEOUT        => 0, 
        CURLOPT_FOLLOWLOCATION => true, 
        CURLOPT_CUSTOMREQUEST  => "GET"
    ));
    //実行curl
    $response = curl_exec($curl);
    curl_close($curl);
    echo $response;
}else {
    echo "";
}

数据接口(3)

此处搭建至Dcoker中的参考路径

说明
http://191.167.321.321:9200/test/_search
test为在网段设置的数据组名称,
_search可理解为固定搭配
采用的是上传文件的方式，添加数据。上传后会自动生成索引
搭建完毕后可以通过(http://本地ip:5601/app/home#/)访问网页端

参数样板

csv内容

NO,日语,词性,中文
1,ちゅうごくじん（中国人）,〔名〕,中国人
2,にほんじん（日本人）,〔名〕,日本人
3,かんこくじん（韓国人）,〔名〕,韩国人
4,アメリカじん（～人）,〔名〕,美国人
5,フランスじん（～人）,〔名〕,法国人
6,がくせい（学生）,〔名〕,（大）学生
7,せんせい（先生）,〔名〕,老师
8,りゅうがくせい（留学生）,〔名〕,留学生
9,きょうじゅ（教授）,〔名〕,教授
10,しゃいん（社員）,〔名〕,职员
11,かいしゃいん（会社員）,〔名〕,公司职员
12,てんいん（店員）,〔名〕,店员
13,けんしゅうせい（研修生）,〔名〕,进修生
14,きぎょう（企業）,〔名〕,企业
15,だいがく（大学）,〔名〕,大学
16,ちち（父）,〔名〕,（我）父亲
17,かちょう（課長）,〔名〕,科长
18,しゃちょう（社長）,〔名〕,总经理，社
19,でむかえ（出迎え）,〔名〕,迎
20,あのひと（あの人）,〔名〕,那个人
21,をたし,〔代〕,我
22,あなた,〔代〕,你
23,どうも,〔副〕,非常，很
24,はい,〔叹〕,哎，是（应答）；是的
25,いいえ,〔叹〕,不，不是
26,あっ,〔叹〕,哎，哎呀
27,り（李）,〔专〕,李
28,おう（王）,〔专〕,王

返回的json参数

{
    "took": 1,
    "timed_out": false,
    "_shards": {
        "total": 1,
        "successful": 1,
        "skipped": 0,
        "failed": 0
    },
    "hits": {
        "total": {
            "value": 61,
            "relation": "eq"
        },
        "max_score": 1.0,
        "hits": [
            {
                "_index": "test",
                "_type": "_doc",
                "_id": "cxu874sBAjx6jxA-kE1w",
                "_score": 1.0,
                "_source": {
                    "column1": "NO",
                    "column4": "中文",
                    "column3": "词性",
                    "column2": "日语"
                }
            },
            {
                "_index": "test",
                "_type": "_doc",
                "_id": "dBu874sBAjx6jxA-kE1w",
                "_score": 1.0,
                "_source": {
                    "column1": "1",
                    "column4": "中国人",
                    "column3": "〔名〕",
                    "column2": "ちゅうごくじん（中国人）"
                }
            },
            {
                "_index": "test",
                "_type": "_doc",
                "_id": "dRu874sBAjx6jxA-kE1w",
                "_score": 1.0,
                "_source": {
                    "column1": "2",
                    "column4": "日本人",
                    "column3": "〔名〕",
                    "column2": "にほんじん（日本人）"
                }
            },
            {
                "_index": "test",
                "_type": "_doc",
                "_id": "dhu874sBAjx6jxA-kE1w",
                "_score": 1.0,
                "_source": {
                    "column1": "3",
                    "column4": "韩国人",
                    "column3": "〔名〕",
                    "column2": "かんこくじん（韓国人）"
                }
            },
            {
                "_index": "test",
                "_type": "_doc",
                "_id": "dxu874sBAjx6jxA-kE1w",
                "_score": 1.0,
                "_source": {
                    "column1": "4",
                    "column4": "美国人",
                    "column3": "〔名〕",
                    "column2": "アメリカじん（～人）"
                }
            },
            {
                "_index": "test",
                "_type": "_doc",
                "_id": "eBu874sBAjx6jxA-kE1w",
                "_score": 1.0,
                "_source": {
                    "column1": "5",
                    "column4": "法国人",
                    "column3": "〔名〕",
                    "column2": "フランスじん（～人）"
                }
            },
            {
                "_index": "test",
                "_type": "_doc",
                "_id": "eRu874sBAjx6jxA-kE1w",
                "_score": 1.0,
                "_source": {
                    "column1": "6",
                    "column4": "（大）学生",
                    "column3": "〔名〕",
                    "column2": "がくせい（学生）"
                }
            },
            {
                "_index": "test",
                "_type": "_doc",
                "_id": "ehu874sBAjx6jxA-kE1w",
                "_score": 1.0,
                "_source": {
                    "column1": "7",
                    "column4": "老师",
                    "column3": "〔名〕",
                    "column2": "せんせい（先生）"
                }
            },
            {
                "_index": "test",
                "_type": "_doc",
                "_id": "exu874sBAjx6jxA-kE1w",
                "_score": 1.0,
                "_source": {
                    "column1": "8",
                    "column4": "留学生",
                    "column3": "〔名〕",
                    "column2": "りゅうがくせい（留学生）"
                }
            },
            {
                "_index": "test",
                "_type": "_doc",
                "_id": "fBu874sBAjx6jxA-kE1w",
                "_score": 1.0,
                "_source": {
                    "column1": "9",
                    "column4": "教授",
                    "column3": "〔名〕",
                    "column2": "きょうじゅ（教授）"
                }
            }
        ]
    }
}

访问发布的画面在进行查询，搜索。

http://本地ip:8080/demo/elastic_search/

赵Asen
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
跨域--跨域访问接口-整体说明 以及如何解决跨域问题
m0_65132206的博客
05-04 1636
什么是跨域问题?平时遇到跨域问题应该怎么解决,希望对大家有帮助
html5跨域访问接口或者一般处理程序
milijiangjun的博客
07-14 9112
本人于最近设计到的项目中碰到拉html5 跨域的问题。需要在html5中调用写好的webservice接口。出现错误 然后就是好纠结，然后网上百度。。。 百度到的基本就是三种解决方法，第一种就是：使用代理，这个我没太明白是怎么个意思，只知道好像不是前端的事情； 第二种是：扔给后台解决， 第三种是：jsonp 第四种是：模拟表单提交，这个别人大概的提取了下。本人也找不到 然后接着百度
ajax总结(三):ajax跨域访问接口方法汇总
庚中
11-13 6890
ajax跨域访问接口方法汇总 一.学习跨域之前先要了解: 1.同源和跨域的概念 a.同源:协议头、域名、端口全部一样就叫同源; b.跨域:只要协议头,域名,端口任意一个不一样就是跨域. 因为跨域的影响,导致浏览器出于安全角度考虑，不允许你用ajax（XMLHttpRequest）访问跨域的资源. 来一张图来说明: (如果使用了跨域,会报&amp;amp;amp;quot;No ‘Access-Control-Allow-Origi...
nextJs 跨域访问接口数据
qq_33040483的博客
06-28 1778
在next.config.js中使用rewrites解决跨域 async rewrites() { return [ { source: '/api/:path*', destination: `http://xxx.com/api/:path*` } ] } 接口调用的时候使用 '/api/...'这种格式， 当然也可以使用express，网上教程很多 ...
jeesite跨域访问接口
大胖老师的专栏
10-08 3921
一、什么是跨域访问？ 跨域是指你在A网站的浏览器页面去访问B网站的服务，比如你在www.A.com访问www.B.com提供的后台服务，或者你在www.A:80.com去访问www.A:81.com的后台服务，同一个域名下的不同端口访问也算跨域！二、为什么无法跨域访问？ 通常浏览器为了安全性考虑会在A域名下面拦截B域名的返回数据，导致不能跨域访问!三、如果跨域访问？ 关于如何跨域访问以及上面的
【浏览器跨域】跨域访问接口浏览器怎么设置？
朱远辉的博客
03-29 2695
【浏览器跨域】跨域访问接口浏览器怎么设置？
接口设置允许跨域访问
三侠剑的博客
06-20 612
@CrossOrigin
Vue跨域访问后端接口问题解决
kennyharris
12-08 2334
Vue、远程异步请求。
跨域调用接口解决方式
huazhebia的专栏
06-15 388
若出现调用接口提示跨域问题，则可在被调接口增加以下代码，表示允许被跨域访问。
访问接口跨域请求
心若向阳 无谓悲伤
06-16 2441
一、跨域 1、当两个域具有相同的协议(如http), 相同的端口(如80)，相同的host（如www.google.com)，那么我们就可以认为它们是相同的域（协议，域名，端口都必须相同）。 2、跨域就指着协议，域名，端口不一致，出于安全考虑，跨域的资源之间是无法交互的(例如一般情况跨域的JavaScript无法交互，当然有很多解决跨域的方案) 二、导致跨域的原因：同源策略 跨域的出现是因为浏览器的同源策略的限制，出发点是为了安全起见 同源策略的方向一是针对接口的请求，二是针对Dom的查询。 没有
vue proxyTable 接口跨域请求调试的示例
08-29
Vue ProxyTable 接口跨域请求调试示例 Vue ProxyTable 是一种用于解决跨域请求的技术，通过配置 proxyTable，可以实现接口的跨域请求调试。本文主要介绍了 Vue ProxyTable 接口跨域请求调试的示例，旨在帮助开发者...
jQuery实现跨域iframe接口方法调用
10-24
jQuery提供了一种解决方案，通过利用`postMessage` API来实现跨域iframe接口方法的调用。 同源策略是浏览器安全策略的一部分，它规定只有相同协议、主机名和端口的页面才能相互访问其资源。但在实际应用中，比如...
跨域访问接口的语法及应用
qq_43944285的博客
04-30 312
一跨域 (必会) 不同源的Ajax请求 (协议,域名,端口)相同 同源策略 概述:不同源的Ajax请求 (协议,域名,端口)相同 错误发生在浏览器端 (浏览器会执行同源策略) 例如:跨域在域名不相同的情况下,发送ajax, 服务器会响应数据回来了(没有头)(浏览器报错 (不接收因为没有遵循同源策略) 阅览器会执行同源策略(不让返回)) 响应头 **如何解决问题: 阅览器觉得不安全 (后端还是能收到请求的) 1.让其同源 :修改 (弊端:前后端分离) 改发JSONP
Prometheus（八）：Prometheus监控elasticsearch及常用API
dl_11的博客
08-29 285
Elasticsearch Exporter主要是用来获取 Elasticsearch的指标数据，是使用Go语言写的，端口号为：9114。
elasticsearch存入数据嵌入式数据解决扁平化查询问题
z1299236067的博客
08-26 298
elasticsearch存入数据嵌入式数据解决扁平化查询问题
ElasticSearch学习笔记(四)分页、高亮、RestClient查询文档
挑灯日记 记录自己
08-29 646
ElasticSearch学习笔记(一)倒排索引、ES和Kibana安装、索引操作ElasticSearch学习笔记(二)文档操作、RestHighLevelClient的使用ElasticSearch学习笔记(三)RestClient操作文档、DSL查询文档、搜索结果排序。
python使用多进程multiprocessing
最新发布
小蜗Leon的博客
08-29 449
对于 CPU 密集型任务，pool.map()的阻塞性不会显著影响计算速度，反而可以大大提高处理速度。对于 I/O 密集型任务或需要频繁交互的任务，可能需要考虑非阻塞方法或使用其他并行技术。因此，在选择是否使用pool.map()时，请根据具体的任务类型和要求来决定。如果你的任务主要是计算密集型的，那么pool.map()是一个很好的选择。适用于需要异步执行任务的情况，可以立即返回结果对象。适合处理单个任务，可以处理任意数量的参数。apply()
【Git】常用命令大全(带注释)
2136
08-29 428
Git 是一个强大的版本控制工具，本文详细介绍了 Git 的常用命令，包括本地配置、分支操作和远程仓库交互等。这些命令涵盖了 Git 使用的基本和高级功能，希望对你的工作有所帮助。
【C#】【EXCEL】Bumblebee/Classes/ExShape.cs
hmywillstronger的博客
08-25 1869
这些方法和属性共同构成了一个强大的接口,用于在C#中操作Excel形状,特别是SmartArt对象。它们展示了如何与Excel的COM对象交互,修改形状的各种属性,如颜色、线条粗细和布局。这个类的设计考虑到了易用性和灵活性,允许开发者精确控制Excel中的图形元素。这个方法重写了Object类的ToString方法,提供了ExShape对象的自定义字符串表示。当然,我会为这段代码添加详细的中文注释,以便于您的学习和博客发表。这个方法设置形状轮廓的颜色。它同时设置线条的前景色和背景色,以确保一致的颜色效果。
局域网访问java接口跨域
06-04
跨域问题指的是浏览器出于安全性考虑，限制了客户端JavaScript脚本发起跨域请求的能力。在Java Web开发中，如果前端页面和后台接口不在同一个域名下，就会遇到跨域问题。要解决这个问题，可以采用以下两种方式： 1. 服务器端设置响应头 通过在服务器端设置响应头，让浏览器认为当前请求是合法的跨域请求，从而绕过跨域限制。在Java中，可以通过设置HttpServletResponse对象的响应头来实现。常用的设置如下： ``` response.setHeader("Access-Control-Allow-Origin", "*"); response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE"); response.setHeader("Access-Control-Max-Age", "3600"); response.setHeader("Access-Control-Allow-Headers", "x-requested-with"); ``` 其中，Access-Control-Allow-Origin表示允许跨域请求的来源地址，*表示允许所有来源。Access-Control-Allow-Methods表示允许跨域请求的HTTP方法，Access-Control-Max-Age表示预检请求的有效期，Access-Control-Allow-Headers表示允许跨域请求的自定义头信息。 2. 使用JSONP JSONP是一种前端跨域请求的解决方案，它通过在页面中动态添加一个<script>标签来实现。在Java中，可以通过编写返回JSONP格式数据的接口来实现。JSONP的原理是利用<script>标签不受同源策略限制的特性，将需要获取的数据包装成一个回调函数的参数，然后通过动态创建<script>标签，以回调函数名作为参数发送到服务器端获取数据。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值