vue.js Sping Boot POST请求错误,阻止CORS策略

ttcibm8c  于 2023-08-07  发布在  Vue.js
关注(0)|答案(2)|浏览(138)

我正在尝试调用我使用Sping Boot 创建的Endpoint。(Sping Boot 的全新版本)当我通过POSTMAN(整个CRUD过程)调用端点时,一切都很好。为了测试,我还做了一个小的Vue应用程序来测试端点。
GET请求工作正常,我得到一个Object。当我尝试发出POST请求时,我收到此错误消息:
“CORS策略已阻止从源'http://localhost:5173'访问位于'http://localhost:8080/api/saveorder/'的XMLHttpRequest:对预检请求的响应未通过访问控制检查:请求的资源上不存在'Access-Control-Allow-Origin'标头。”
Controller看起来像这样:

@RestController
@RequestMapping("/api")
@CrossOrigin("http://localhost:5173/")
public class OrderController {

@Autowired
private OrderRepository orderRepository;

@Autowired
private ProductRepository productRepository;

@GetMapping("/orders/{id}")
public Order fetchOrder(@PathVariable long id) {
    return orderRepository.findById(id).get();
}

@PostMapping("/saveOrder")
public String saveOrder(@RequestBody Order order){
    Product product = productRepository.findById(order.getItemId()).get();

    order.setTotalPrice(new BigDecimal(product.getCost()).multiply(new BigDecimal(order.getQty())).longValue());
    order.setTotalPrice(order.getTotalPrice() / 100);
    orderRepository.save(order);
    return "Order Saved... total ";
}

字符串
}
这就是JS函数:

const postInput = async () => {


try {
    const requestData = {
      firstName: inputItemFirstName.value,
      lastName: inputItemLastName.value,
      itemId: inputItemID.value
    }

    
    const response = await axios.post('http://localhost:8080/api/saveorder/', requestData)
    outputText.value = JSON.stringify(response.data)
  } catch (error) {
    console.error(error)
  }
}

f0brbegy

f0brbegy1#

您允许的源设置为端口5173,但您正在使用端口8080发送请求
尝试替换

@CrossOrigin("http://localhost:5173/")

字符串

@CrossOrigin("http://localhost:8080")


不需要/ after端口号,因为您已经在

@RequestMapping("/api")


同样你的文章URL在JS中有/saveOrder/但是你Map了/saveOrder 'O'分别是小写和大写
在JS中尝试替换

http://localhost:8080/api/saveorder/


http://localhost:8080/api/saveOrder

vqlkdk9b

vqlkdk9b2#

尝试发送标题“Access-Control-Allow-Origin”:'*'表示服务器方法和js函数。你也可以使用npm package proxy作为你的本地应用。

相关问题