使用places api photo返回“位置0的JSON中意外的令牌”

分类：编程问答

如何解决使用places api photo返回“位置0的JSON中意外的令牌”

我目前正在使用Google Places api来获得一定的舒适度，但是我遇到了一个让我有些困惑的问题，我希望有人可以在这里纠正我。我正在对本地代理服务器进行api调用，到目前为止，除了我尝试为特定业务拉取图像时，所有其他功能都可以正常工作。

到目前为止，我已经在控制台上记录了get请求url的各个部分，以确保其正确连接，并且在这方面一切都正确（我可以将其直接粘贴到浏览器中并获得预期的结果） ）。我有一个直觉，这是一个通用的代码问题，而不是Place api本身特有的问题，但是对此有任何见解将不胜感激。

来自代理服务器的终端错误（似乎没有什么用，但是其他人可能会在这里识别出我不是的东西）

未定义：1����^

SyntaxError：意外令牌-JSON中位置0

前端代码：

function makeAPICall(url) {
  return fetch(url);
}

makeAPICall(`http://localhost:5000/places/${searchString}`)
      .then(response => {
        return response.json();
      })
      .then(data => {
        responseObject = data.results;
        renderResult(responseObject[10]);

        return responseObject[10];
      })
      .then(responseObject => {
        makeAPICall(`http://localhost:5000/place/image/${responseObject.photos[0].photo_reference}`)
          .then(response => {
            return response.json();
          })
          .then(photoData => {
            console.log(photoData);
          });
      });

代理代码（减去与问题无关的工作路径）：

require('dotenv').config({path: '../.env'});

const express = require('express');
const request = require('request');

const GOOGLE_API_KEY = process.env.API_KEY;
const placesImgURL = 'https://maps.googleapis.com/maps/api/place/photo?maxwidth=400&photoreference=';

const app = express();

app.use((req,res,next) => {
  res.header('Access-Control-Allow-Origin','*');
  next();
});

app.get('/place/image/:query',(req,res) => {
  request(
    { url: `${placesImgURL}${req.params.query}&key=${GOOGLE_API_KEY}` },(error,response,body) => {
      if (error || response.statusCode !== 200) {
        console.log(response);
      }

      res.json(JSON.parse(body));
    }
  )
});

const PORT = process.env.PORT || 4000;
app.listen(PORT,() => console.log(`listening on ${PORT}`));

更新：

服务器代码中触发错误的行是：

res.json(JSON.parse(body));

在开发工具中进行网络通话的屏幕截图：

enter image description here

当控制台记录引发错误的行时，我得到以下信息（警告是，这是完整的日志，而且非常长）：

ServerResponse {
  _events: { finish: [Function: bound resOnFinish] },_eventsCount: 1,_maxListeners: undefined,output: [],outputEncodings: [],outputCallbacks: [],outputSize: 0,writable: true,_last: false,chunkedEncoding: false,shouldKeepAlive: true,useChunkedEncodingByDefault: true,sendDate: true,_removedConnection: false,_removedContLen: false,_removedTE: false,_contentLength: 22631,_hasBody: true,_trailer: '',finished: true,_headerSent: true,socket:
   Socket {
     connecting: false,_hadError: false,_handle:
      TCP {
        reading: true,onread: [Function: onStreamRead],onconnection: null,_consumed: true,[Symbol(owner)]: [Circular] },_parent: null,_host: null,_readableState:
      ReadableState {
        objectMode: false,highWaterMark: 16384,buffer: BufferList { head: null,tail: null,length: 0 },length: 0,pipes: null,pipesCount: 0,flowing: true,ended: false,endEmitted: false,reading: true,sync: false,needReadable: true,emittedReadable: false,readableListening: false,resumeScheduled: false,emitClose: false,destroyed: false,defaultEncoding: 'utf8',awaitDrain: 0,readingMore: false,decoder: null,encoding: null },readable: true,_events:
      { end: [Array],drain: [Array],timeout: [Function: socketOnTimeout],data: [Function: bound socketOnData],error: [Function: socketOnError],close: [Array],resume: [Function: onSocketResume],pause: [Function: onSocketPause] },_eventsCount: 8,_writableState:
      WritableState {
        objectMode: false,finalCalled: false,needDrain: true,ending: false,finished: false,decodeStrings: false,writing: false,corked: 0,bufferProcessing: false,onwrite: [Function: bound onwrite],writecb: null,writelen: 0,bufferedRequest: null,lastBufferedRequest: null,pendingcb: 3,prefinished: false,errorEmitted: false,bufferedRequestCount: 0,corkedRequestsFree: [Object] },allowHalfOpen: true,_sockname: null,_pendingData: null,_pendingEncoding: '',server:
      Server {
        _events: [Object],_eventsCount: 2,_connections: 1,_handle: [TCP],_usingWorkers: false,_workers: [],_unref: false,pauseOnConnect: false,httpAllowHalfOpen: false,timeout: 120000,keepAliveTimeout: 5000,_pendingResponseData: 0,maxHeadersCount: null,_connectionKey: '6::::5000',[Symbol(IncomingMessage)]: [Function],[Symbol(ServerResponse)]: [Function],[Symbol(asyncId)]: 5 },_server:
      Server {
        _events: [Object],parser:
      HTTPParser {
        '0': [Function: parserOnHeaders],'1': [Function: parserOnHeadersComplete],'2': [Function: parserOnBody],'3': [Function: parserOnMessageComplete],'4': [Function: bound onParserExecute],_headers: [],_url: '',socket: [Circular],incoming: [IncomingMessage],outgoing: null,maxHeaderPairs: 2000,onIncoming: [Function: bound parserOnIncoming] },on: [Function: socketOnWrap],_paused: false,_httpMessage: [Circular],[Symbol(asyncId)]: 8,[Symbol(lastWriteQueueSize)]: 0,[Symbol(timeout)]:
      Timeout {
        _called: false,_idleTimeout: 120000,_idlePrev: [TimersList],_idleNext: [TimersList],_idleStart: 6746,_onTimeout: [Function: bound ],_timerArgs: undefined,_repeat: null,_destroyed: false,[Symbol(unrefed)]: true,[Symbol(asyncId)]: 9,[Symbol(triggerId)]: 8 },[Symbol(kBytesRead)]: 0,[Symbol(kBytesWritten)]: 0 },connection:
   Socket {
     connecting: false,_header:
   'HTTP/1.1 200 OK\r\nX-Powered-By: Express\r\nAccess-Control-Allow-Origin: *\r\nContent-Type: application/json; charset=utf-8\r\nContent-Length: 22631\r\nETag: W/"5867-c3Fodr1eSCA3vlKX+kDMgudDONQ"\r\nDate: Wed,26 Aug 2020 18:14:27 GMT\r\nConnection: keep-alive\r\n\r\n',_onPendingData: [Function: bound updateOutgoingData],_sent100: false,_expect_continue: false,req:
   IncomingMessage {
     _readableState:
      ReadableState {
        objectMode: false,flowing: null,ended: true,reading: false,sync: true,needReadable: false,emittedReadable: true,emitClose: true,readingMore: true,_events: {},_eventsCount: 0,socket:
      Socket {
        connecting: false,_readableState: [ReadableState],_events: [Object],_writableState: [WritableState],server: [Server],_server: [Server],parser: [HTTPParser],[Symbol(timeout)]:
         Timeout {
           _called: false,connection:
      Socket {
        connecting: false,httpVersionMajor: 1,httpVersionMinor: 1,httpVersion: '1.1',complete: true,headers:
      { host: 'localhost:5000',connection: 'keep-alive','user-agent':
         'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML,like Gecko) Chrome/84.0.4147.125 Safari/537.36',accept: '*/*',origin: 'http://localhost:3000','sec-fetch-site': 'same-site','sec-fetch-mode': 'cors','sec-fetch-dest': 'empty',referer: 'http://localhost:3000/','accept-encoding': 'gzip,deflate,br','accept-language': 'en-US,en;q=0.9','if-none-match': 'W/"5868-+iRV2Q1kdgam9TbgiDgKID9Vs1s"' },rawHeaders:
      [ 'Host','localhost:5000','Connection','keep-alive','User-Agent','Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML,'Accept','*/*','Origin','http://localhost:3000','Sec-Fetch-Site','same-site','Sec-Fetch-Mode','cors','Sec-Fetch-Dest','empty','Referer','http://localhost:3000/','Accept-Encoding','gzip,'Accept-Language','en-US,'If-None-Match','W/"5868-+iRV2Q1kdgam9TbgiDgKID9Vs1s"' ],trailers: {},rawTrailers: [],aborted: false,upgrade: false,url: '/places/restaurants+near%20me',method: 'GET',statusCode: null,statusMessage: null,client:
      Socket {
        connecting: false,_consuming: false,_dumped: false,next: [Function: next],baseUrl: '',originalUrl: '/places/restaurants+near%20me',_parsedUrl:
      Url {
        protocol: null,slashes: null,auth: null,host: null,port: null,hostname: null,hash: null,search: null,query: null,pathname: '/places/restaurants+near%20me',path: '/places/restaurants+near%20me',href: '/places/restaurants+near%20me',_raw: '/places/restaurants+near%20me' },params: { query: 'restaurants+near me' },query: {},res: [Circular],route:
      Route { path: '/places/:query',stack: [Array],methods: [Object] } },locals: {},statusMessage: 'OK',statusCode: 200,[Symbol(isCorked)]: false,[Symbol(outHeadersKey)]:
   { 'x-powered-by': [ 'X-Powered-By','Express' ],'access-control-allow-origin': [ 'Access-Control-Allow-Origin','*' ],'content-type': [ 'Content-Type','application/json; charset=utf-8' ],'content-length': [ 'Content-Length','22631' ],etag: [ 'ETag','W/"5867-c3Fodr1eSCA3vlKX+kDMgudDONQ"' ] } }
_http_outgoing.js:470
    throw new ERR_HTTP_HEADERS_SENT('set');
    ^

Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client
    at ServerResponse.setHeader (_http_outgoing.js:470:11)
    at ServerResponse.header (/Users/tyleranyan/Documents/api-practice/places/node_modules/express/lib/response.js:771:10)
    at ServerResponse.send (/Users/tyleranyan/Documents/api-practice/places/node_modules/express/lib/response.js:170:12)
    at ServerResponse.json (/Users/tyleranyan/Documents/api-practice/places/node_modules/express/lib/response.js:267:15)
    at Request.request [as _callback] (/Users/tyleranyan/Documents/api-practice/places/proxy/server.js:25:11)
    at Request.self.callback (/Users/tyleranyan/Documents/api-practice/places/node_modules/request/request.js:185:22)
    at Request.emit (events.js:182:13)
    at Request.<anonymous> (/Users/tyleranyan/Documents/api-practice/places/node_modules/request/request.js:1154:10)
    at Request.emit (events.js:182:13)
    at IncomingMessage.<anonymous> (/Users/tyleranyan/Documents/api-practice/places/node_modules/request/request.js:1076:12)

解决方法

这里的问题是request库似乎已被弃用。如果切换到axios等其他代码，则以下基于您自己的代码可以正常工作：

const express = require('express')
const axios = require('axios')

const url = "https://maps.googleapis.com/maps/api/place/photo?maxwidth=400&photoreference=CnRtAAAATLZNl354RwP_9UKbQ_5Psy40texXePv4oAlgP4qNEkdIrkyse7rPXYGd9D_Uj1rVsQdWT4oRz4QrYAJNpFX7rzqqMlZw2h2E2y5IKMUZ7ouD_SlcHxYq1yL4KbKUv3qtWgTK0A6QbGh87GB3sscrHRIQiG2RrmU_jF4tENr9wGS_YxoUSSDrYjWmrNfeEHSGSc3FyhNLlBU&key=YOUR_API_KEY"

const getData = async (url) => {
  try {
    const response = await axios.get(url)
    const data = response.data
    console.log('data',response.data)
  } catch (error) {
    console.log('error',error)
  }
}

const app = express()
const port = 3000

app.get('/',async (req,res) => {
  res.send(await getData(url))
})

app.listen(port,() => {})

输出：

Response GET / status=200
"data"
"����\u0000\u0010JFIF\u0000\u0001\u00…01b`J+]�Ǥ�%�„c����8�\u001fb\u0017/��..."

此外，响应为image；不要在后端使用json。不过有client-side service。

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

导入项目后报错问题
依赖报错 idea导入项目后依赖报错，解决方案：https://blog.csdn.net/weixin_42420249/article/details/81191861 依赖版本报错：更换其他版本 无法下载依赖可参考：https://blog.csdn.net/weixin_42628809/a
idea不能识别yaml文件
使用mybatis plus常见错误
错误1：代码生成器依赖和mybatis依赖冲突 启动项目时报错如下 2021-12-03 13:33:33.927 ERROR 7228 [ main] o.s.b.d.LoggingFailureAnalysisReporter : *************************** APPL
gradle常见问题与错误
错误1：gradle项目控制台输出为乱码 # 解决方案：https://blog.csdn.net/weixin_43501566/article/details/112482302 # 在gradle-wrapper.properties 添加以下内容 org.gradle.jvmargs=-Df
Mybatis Plus传入参数0不起作用
错误还原：在查询的过程中，传入的workType为0时，该条件不起作用 &lt;select id=&quot;xxx&quot;&gt; SELECT di.id, di.name, di.work_type, di.updated... &lt;where&gt; &lt;if test=&qu
linux中make编译源码包失败
报错如下，gcc版本太低 ^ server.c:5346:31: 错误：‘struct redisServer’没有名为‘server_cpulist’的成员 redisSetCpuAffinity(server.server_cpulist); ^ server.c: 在函数‘hasActiveC
微服务启动错误：Command line is too long. Shorten command line for
解决方案1 1、改项目中.idea/workspace.xml配置文件，增加dynamic.classpath参数 2、搜索PropertiesComponent，添加如下 &lt;property name=&quot;dynamic.classpath&quot; value=&quot;tru
vue常见错误
删除根组件app.vue中的默认代码后报错：Module Error (from ./node_modules/eslint-loader/index.js): 解决方案：关闭ESlint代码检测，在项目根目录创建vue.config.js，在文件中添加 module.exports = { lin
spark常见错误
查看spark默认的python版本 [root@master day27]# pyspark /home/software/spark-2.3.4-bin-hadoop2.7/conf/spark-env.sh: line 2: /usr/local/hadoop/bin/hadoop: No s
matplotlib报错：AttributeError: module 'backend_interagg' has no attribute 'FigureCanvas'. Did you mean: 'FigureCanvasAgg'?
使用本地python环境可以成功执行 import pandas as pd import matplotlib.pyplot as plt # 设置字体 plt.rcParams[&#39;font.sans-serif&#39;] = [&#39;SimHei&#39;] # 能正确显示负号 p
gitlab登录失败，报错：This challenge page was accidentally cached by an intermediary and is no longer available.
设置时间 控制面板
后端开发常见错误
错误1：Request method ‘DELETE‘ not supported 错误还原：controller层有一个接口，访问该接口时报错：Request method ‘DELETE‘ not supported 错误原因：没有接收到前端传入的参数，修改为如下 参考 错误2：cannot r
docker常见错误
错误1：启动docker镜像时报错：Error response from daemon: driver failed programming external connectivity on endpoint quirky_allen 解决方法：重启docker -&gt; systemctl r
idea常见错误
错误1：private field ‘xxx‘ is never assigned 按Altʾnter快捷键，选择第2项 参考：https://blog.csdn.net/shi_hong_fei_hei/article/details/88814070 错误2：启动时报错，不能找到主启动类 #
pip安装依赖失败
报错如下，通过源不能下载，最后警告pip需升级版本 Requirement already satisfied: pip in c:\users\ychen\appdata\local\programs\python\python310\lib\site-packages (22.0.4) Coll
maven常见错误
错误1：maven打包报错 错误还原：使用maven打包项目时报错如下 [ERROR] Failed to execute goal org.apache.maven.plugins:maven-resources-plugin:3.2.0:resources (default-resources)
cloud项目中常见错误
错误1：服务调用时报错 服务消费者模块assess通过openFeign调用服务提供者模块hires 如下为服务提供者模块hires的控制层接口 @RestController @RequestMapping(&quot;/hires&quot;) public class FeignControl
springboot常见错误
错误1：运行项目后报如下错误 解决方案 报错2：Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.8.1:compile (default-compile) on project sb 解决方案：在pom.
springmvc拦截器中使用redisTemplate报空指针异常
参考 错误原因 过滤器或拦截器在生效时，redisTemplate还没有注入 解决方案：在注入容器时就生效 @Component //项目运行时就注入Spring容器 public class RedisBean { @Resource private RedisTemplate&lt;String
vite报错：npm ERR! command C:WINDOWSsystem32cmd.exe /d /s /c C:UsersychenAppDataLocalTempnpx-dde1c848.cmd
使用vite构建项目报错 C:\Users\ychen\work&gt;npm init @vitejs/app @vitejs/create-app is deprecated, use npm init vite instead C:\Users\ychen\AppData\Local\npm-
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot