cors头'access control allow origin'缺少react

8qgya5xd  于 2021-07-14  发布在  Java
关注(0)|答案(2)|浏览(373)

我正在springboot之上构建一个react应用程序。当我试图向服务器发出put请求时,浏览器上出现了这些错误localhost:8080
已阻止跨源请求:同一源策略不允许读取位于的远程资源http://localhost:8080/产品(原因:缺少cors标题“访问控制允许源站”。
已阻止跨源请求:同一源策略不允许读取位于的远程资源http://localhost:8080/产品(原因:cors请求未成功)
我在服务器端为localhost 3000设置了@crossorigin。
有一段时间以来,我一直试图通过添加头文件、代理甚至在任何地方使用firefox cors来解决这个问题。似乎什么都没用。
请看下面我的前端代码

import React, { Component } from "react";
import { Card, Form, Button } from "react-bootstrap";
import axios from "axios";
import Toasting from "./Toasting";
export default class AddProducts extends Component {
  constructor(props) {
    super(props);
    this.state = this.startState;
    this.state.toast = false;
    this.productChange = this.productChange.bind(this);
    this.submitProduct = this.submitProduct.bind(this);
    var config = {
            headers: {'Access-Control-Allow-Origin': '*'}
        };
  }

  startState = { id: "", name: "", brand: "", made: "", price: "" };

  componentDidMount() {
    const productId = this.props.match.params.id;
    if (productId) {
      this.findProductById(productId);
    }
  }

  findProductById = (productId) => {
    axios
      .get("http://localhost:8080/products/" + productId)
      .then((response) => {
        if (response.data != null) {
          this.setState({
            id: response.data.id,
            name: response.data.name,
            brand: response.data.brand,
            made: response.data.madein,
            price: response.data.price,
          });
        }
      })
      .catch((error) => {
        console.error("Error has been caught: " + error);
        console.log(error);
      });
  };

  reset = () => {
    this.setState(() => this.startState);
  };

  submitProduct = (event) => {
    //Prevent default submit action
    event.preventDefault();

    const product = {
      id: this.state.id,
      name: this.state.name,
      brand: this.state.brand,
      madein: this.state.made,
      price: this.state.price,
    };

    axios.post("http://localhost:8080/products", product)

    .then((response) => {
      if (response.data != null) {

        this.setState({ toast: true });
        setTimeout(() => this.setState({ toast: false }), 3000);
      } else {
        this.setState({ toast: false });
      }
    });
    this.setState(this.startState);
  };

  productChange = (event) => {
    this.setState({
      [event.target.name]: event.target.value,
    });
  };

  productList = () => {
    return this.props.history.push("/");
  };

  updateProduct = event => {
    //Prevent default submit action
    event.preventDefault();

    const product = {
      id: this.state.id,
      name: this.state.name,
      brand: this.state.brand,
      madein: this.state.made,
      price: this.state.price,
    };

  ***************THIS IS WHERE THE ERROR IS**********************************************
    axios.put("http://localhost:8080/products", product, this.config).then((response) => {

      if(response.data != null) {
        this.setState({ toast: true });
        setTimeout(() => this.setState({ toast: false }), 3000);
        setTimeout(() => this.productList(), 3000);
      } else {
        this.setState({ toast: false });
      }
    });
    this.setState(this.startState);
  };

  render() {
    const { name, brand, made, price } = this.state;
    return (
      <div>
        <div style={{ display: this.state.toast ? "block" : "none" }}>
          <Toasting
            toast={this.state.toast}
            message={"Product has been successfully saved!!!"}
            type={"success"}
          />
        </div>

        <Card className={"border border-dark bg-dark text-white"}>
          <Card.Header align="center">
            {" "}
            {this.state.id ? "Update a Product" : "Add a Product"}
          </Card.Header>
          <Form
            onSubmit={this.state.id ? this.updateProduct : this.submitProduct}
            id="productFormId"
            onReset={this.reset}
          >
            <Card.Body>
              <Form.Row>
                <Form.Group controlId="formGridName">
                  <Form.Label>Product Name</Form.Label>
                  <Form.Control
                    required
                    autoComplete="off"
                    type="text"
                    name="name"
                    value={name}
                    onChange={this.productChange}
                    required
                    autoComplete="off"
                    className={"bg-dark text-white"}
                    placeholder="Enter Product Name"
                  />
                </Form.Group>
              </Form.Row>
              <Form.Row>
                <Form.Group controlId="formGridBrand">
                  <Form.Label>Brand</Form.Label>
                  <Form.Control
                    required
                    autoComplete="off"
                    type="text"
                    name="brand"
                    value={brand}
                    onChange={this.productChange}
                    className={"bg-dark text-white"}
                    placeholder="Enter Brand Name"
                  />
                </Form.Group>
              </Form.Row>
              <Form.Row>
                <Form.Group controlId="formGridMade">
                  <Form.Label>Made</Form.Label>
                  <Form.Control
                    required
                    autoComplete="off"
                    type="text"
                    name="made"
                    value={made}
                    onChange={this.productChange}
                    className={"bg-dark text-white"}
                    placeholder="Made in"
                  />
                </Form.Group>
              </Form.Row>
              <Form.Row>
                <Form.Group controlId="formGridPrice">
                  <Form.Label>Price</Form.Label>
                  <Form.Control
                    required
                    autoComplete="off"
                    type="text"
                    name="price"
                    value={price}
                    onChange={this.productChange}
                    className={"bg-dark text-white"}
                    placeholder="Product Price"
                  />
                </Form.Group>
              </Form.Row>
            </Card.Body>
            <Card.Footer>
              <Button size="sm" variant="success" type="submit">
                {this.state.id ? "Update" : "Submit"}
              </Button>{" "}
              <Button size="sm" variant="info" type="reset">
                Undo
              </Button>{" "}
              <Button
                size="sm"
                variant="info"
                type="button"
                onClick={this.productList.bind()}
              >
                Products
              </Button>
            </Card.Footer>
          </Form>
        </Card>
      </div>
    );
  }
}

请参阅下面我的产品控制器类服务器端

package ie.sw.spring;

import java.util.List;
import java.util.NoSuchElementException;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.bind.annotation.CrossOrigin;

@RestController
@CrossOrigin("http://localhost:3000")
public class ProductController {

    @Autowired
    private ProductService service;

    @GetMapping("/products")
    public List<Product> list() {
        return service.listAll();
    }

    // Get products by their id
    @GetMapping("/products/{id}")
    public ResponseEntity<Product> get(@PathVariable Long id) {
        try {

            Product product = service.get(id);
            return new ResponseEntity<Product>(product, HttpStatus.OK);

        } catch (NoSuchElementException e) {

            return new ResponseEntity<Product>(HttpStatus.NOT_FOUND);
        }

    }

    // Handle post requests
    @PostMapping("/products")
    public void add(@RequestBody Product product) {
        service.save(product);
    }

    // Update a product
    @PutMapping("/products/{id}")
    public ResponseEntity<?> update(@RequestBody Product product, @PathVariable Long id) {
        try {
            Product existProduct = service.get(id);
            service.save(product);
            return new ResponseEntity<>(HttpStatus.OK);
        } catch (NoSuchElementException e) {
            return new ResponseEntity<>(HttpStatus.NOT_FOUND);
        }

    }

    @DeleteMapping("/products/{id}")
    public void delete(@PathVariable Long id) {
        service.delete(id);
    }

}
bz4sfanl

bz4sfanl1#

你试过添加 "proxy": "http://localhost:8080" 到package.json文件。这对我很有帮助。我也有同样的问题。

vddsk6oq

vddsk6oq2#

@交叉原点(“http://localhost:3000")
错了,试试看
@交叉原点(“http://localhost:8080")

相关问题