我正在尝试调用我使用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)
}
}
型
2条答案
按热度按时间f0brbegy1#
您允许的源设置为端口5173,但您正在使用端口8080发送请求
尝试替换
字符串
与
型
不需要/ after端口号,因为您已经在
型
同样你的文章URL在JS中有/saveOrder/但是你Map了/saveOrder 'O'分别是小写和大写
在JS中尝试替换
型
与
型
vqlkdk9b2#
尝试发送标题“Access-Control-Allow-Origin”:'*'表示服务器方法和js函数。你也可以使用npm package proxy作为你的本地应用。