Question

我有一个应用程序，该应用程序在AWS S3上具有React前端，该应用程序连接到在AWS Elastic Beanstalk上运行的Express后端。当S3对EB进行首次初始化服务调用时，它将触发“加载不安全脚本”错误消息。如何解决此问题而不必从浏览器手动加载？

https://imgur.com/C06jQ9a

//客户

import logo from './logo.svg';
import './App.css';

class App extends Component {

  state = {data: null};
  componentDidMount() {
      this.callBackendAPI()
        .then(res => this.setState({data : res.express}))
        .catch(err => console.log(err));
  }

  callBackendAPI = async() => {
        const response = await fetch('/express_backend');
        const body = await response.json();
        if (response.status !== 200) {
            throw Error(body.message)
        }
        return body;
  }

  render() {
        return (
            <div className="App">
                <h1>Message*</h1>
                <ul>
                  {}
                    <li>TEST</li>
                    <li>{this.state.data}</li>
                </ul>
            </div>
        );
  }
}

export default App;

服务器

const AWS = require('aws-sdk');
AWS.config.region = process.env.REGION;

const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const cors = require('cors');

app.use(bodyParser.urlencoded({extended:false}));

app.use(cors());


app.all('/', function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "https://<S3-ENDPOINT>.com");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    next();
});


app.get('/', function(req, res) {
  console.log('get request for root');
    res.send({express: 'EXPRESS BACKEND CONNECTED TO REACT ROOT'});
});

app.get('/express_backend', function(req, res) {
  console.log('get request received');
  res.send({express: 'EXPRESS BACKEND CONNECTED TO REACT'});
});

const port = process.env.PORT || 8081;
  app.listen(port, function() {
    console.log('server initialized on port: ' + port);
});

预期结果是前端从后端检索的响应对象显示“ EXPRESS BACKEND CONNECTED TO REACT”。

如何解决应用程序前端的“加载不安全脚本”消息？

0 个答案: