应用程序(客户端/服务器)在Heroku上托管时无法与cors一起工作

kokeuurv 于 12个月前发布在其他

关注(0)|答案(2)|浏览(159)

我在Heroku服务器上运行我的应用程序时遇到了一个问题;虽然它在本地工作得很好。我希望一些Maven或只是第二双眼睛会指出我可能错过的东西。
一个应用程序是一个服务器，这是代码：

const express = require('express'),
      server = express(),
      cors = require('cors');

server.use(cors({origin: "https://client-fox-67890fghij.herokuapp.com/"}));

server.get('/json-data', (req, res) => {
  res.status(200).send([
      {order:1,value:2},
      {order:10,value:29}
    ])
});

字符串
另一个应用程序是一个客户端（Next.JS），这是代码：
app/page.tsx文件：

import Receiver from './components/Receiver'

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <div>
        <Receiver />
      </div>
    </main>
  )
}

型
app/components/Receiver.tsx文件：

'use client'

import {useState,useEffect} from "react"
import ListShow from './ListShow'

function Receiver() {
  const [data, setData] = useState([]);
  // const apiURL = 'http://localhost:8888/json-data'
  const apiURL = 'https://server-wolf-12345abcde.herokuapp.com/json-data'

  useEffect(() => {
    let ignore = false;

    async function fetchData() {
      const result = await fetch(apiURL);
      if (!ignore) setData(await result.json());
    }

    fetchData();
    return () => { ignore = true; }
  }, []);

  return <><ListShow dataList={data}/></>;
}

export default Receiver;

型
上传两个应用程序并检查服务器端是否按预期响应后，将Web浏览器指向：

https://server-wolf-12345abcde.herokuapp.com/json-data

型
当我将浏览器指向：

https://client-fox-67890fghij.herokuapp.com/

型
我在Firefox中的Web开发工具控制台中遇到此错误：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://server-wolf-12345abcde.herokuapp.com/json-data. (Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘https://client-fox-67890fghij.herokuapp.com/’).
Uncaught (in promise) TypeError: NetworkError when attempting to fetch resource.

型
在本地，服务器运行在localhost：8888上，客户端运行在localhost：3000上。
然后在我使用的服务器中：

server.use(cors({origin: "http://localhost:3000"}));

型
为什么当服务器和客户端托管在Heroku上时，它不再工作？

heroku

来源：https://stackoverflow.com/questions/77568536/apps-client-server-not-working-with-cors-when-hosted-on-heroku

2条答案

按热度按时间

pqwbnv8z1#

这是确切的错误消息吗？还是你稍微修改了一下（例如，隐藏你实际的Heroku域名）？没有应用程序出现在这些URL上，我想知道这是否通过巧妙地更改错误消息中的域名来掩盖问题。
文档中给出了没有尾随斜杠的origin的示例：
例如，如果将其设置为"http://example.com"，则只允许来自“http：//example.com”的请求。
当origin是字符串时，使用===进行比较，这意味着它在这一点上不会非常灵活。在我的浏览器中播放，看起来请求 * 不 * 在Origin头部中包含尾随斜杠。
试着去掉这个斜线：

server.use(cors({origin: "https://client-fox-67890fghij.herokuapp.com"}));
//                                                                   ^

字符串

赞(0）回复(0）举报 12个月前

xtupzzrd2#

正如错误所说，URL不匹配。像Heroku这样的服务通常会在重新部署时提供给予不同的URL，这似乎是事实。修复CORS可能不是这种情况下的最佳方法。我认为您应该在Next应用中调用一个API，将调用转发到其他URL。类似于app/json-data/route.ts文件，

export async function GET() {
  const res = await fetch('https://server-wolf-12345abcde.herokuapp.com/json-data')
  const data = await res.json()
  return Response.json({ data })
}

字符串
在您的Receiver.tsx更改为

async function fetchData() {
      const result = await fetch('/json-data');
      if (!ignore) setData(await result.json());
    }

型

赞(0）回复(0）举报 12个月前

我来回答

应用程序(客户端/服务器)在Heroku上托管时无法与cors一起工作

2条答案

相关问题

热门标签

最新问答