Fatal编程技术网
  • javascript/
  • Javascript 服务器发送html页面数据而不是实际数据？

Javascript 服务器发送html页面数据而不是实际数据？

javascript node.js reactjs

Javascript 服务器发送html页面数据而不是实际数据？,javascript,node.js,reactjs,Javascript,Node.js,Reactjs,我有一个react应用程序和node.js后端。在我的react组件中，我正在获取一些数据，但是服务器发送html页面。它在屏幕上显示原始html 后端（server.js）： 前端（app.js=>组件） 昨天（我发布此问题的前一天），在我关闭本地服务器之前，应用程序运行良好。但现在它的行为很奇怪，当我打开客户端的package.json时，我注意到proxy属性缺失（我不知道是否意外删除了它），我想我需要提到它，假设有什么东西删除了它。 先谢谢你 html: 反应应用程序 您需要启用Jav

我有一个react应用程序和node.js后端。在我的react组件中，我正在获取一些数据，但是服务器发送html页面。它在屏幕上显示原始html

后端（server.js）：

前端（app.js=>组件）

昨天（我发布此问题的前一天），在我关闭本地服务器之前，应用程序运行良好。但现在它的行为很奇怪，当我打开客户端的
package.json
时，我注意到
proxy
属性缺失（我不知道是否意外删除了它），我想我需要提到它，假设有什么东西删除了它。 先谢谢你

html:


反应应用程序
您需要启用JavaScript才能运行此应用程序。
您认为需要将获取更改为指向API位置，可能是：

"http://localhost:5000/a"
不是

它将首先指向主Web服务器，尝试在
server.js的其余部分找到API的端口，然后将
fetch（“/a”）
更新为真实的API URL
fetch（“http://localhost:port/a“”
之后，您必须通过添加cors中间件来允许从react应用程序访问此端点：


  • 为express安装cors中间件包：
    $npm安装-s cors
    • 

  • 使用
    server.js中的中间件

  • 进口cors midleware
    var cors=require（“cors”）
    • 

  • 通过添加行
    app.Use（cors（））来使用它
    • 

    • 

  • 再次运行代码
    • 

    享受
    它显示了
    hello world
    ？不，它在页面中将
    index.html
    文件显示为文本。我认为服务器没有链接到这个页面，也没有呈现它。我正在使用端口5000中的服务器和3000中的react应用程序。我在您的代码中没有看到
    index.html
    ，也没有处理
    index.html
    ，或者您的意思是发送react JS的
    index.html
    ？（
    public/index.html
    ）不是因为端口不匹配吗？如果将浏览器指向5000，会发生什么情况？它只显示页面的
    hello world
    。它显示一些错误
    Access to fetch at'http://localhost:5000/a“起源”http://localhost:3000'已被CORS策略阻止：请求的资源上不存在'Access Control Allow Origin'标头。
    我认为我可以使用
    /a
    因为我在
    package.json中使用了
    代理
    ，所以我不确定package.json中的代理是什么。你可以在你的API上使用CORS插件，也可以将你的API路由移动到你的主服务器上？显然，问题不在于CORS，我尝试了CORS中间件，但没有任何改变。正如我在一些教程中所读到的，package.json中的代理解决了CORS问题。

    class App extends React.Component{
    state = {
        res: null
    }
    componentDidMount(){
        fetch("/a")
            .then(res=> res.text())
            .then(res=>this.setState({
                res
            }))
    }
    render(){
        return(
            <div>   
                <h1>yay</h1>
                <p>{ this.state.res }</p>
            </div>
        )
    }
}
export default App;

    

    import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));


serviceWorker.unregister();

    

    {
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "proxy": "http://localhost:5000",
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

    

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

    

    "http://localhost:5000/a"

    

    "/a"