28.解决重命名历史对话功能后端无法获取前端请求bug

解决重命名历史对话功能后端无法获取前端请求bug

在编写完前后端代码之后，当尝试在页面进行相应时，在控制台出现下列问题

Access to XMLHttpRequest at 'http://localhost:8080/api/chat/conversations/15/rename' from origin 'http://localhost:4000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. ChatTest.vue:168 重命名失败 AxiosError {message: 'Network Error', name: 'AxiosError', code: 'ERR_NETWORK', config: {…}, request: XMLHttpRequest, …} (匿名) @ ChatTest.vue:168 Promise.catch renameConversation @ ChatTest.vue:167 onClick @ ChatTest.vue:21 callWithErrorHandling @ runtime-core.esm-bundler.js:199 callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:206 invoker @ runtime-dom.esm-bundler.js:729 ChatTest.vue:160

        PUT http://localhost:8080/api/chat/conversations/15/rename net::ERR_FAILED

dispatchXhrRequest @ xhr.js:195 xhr @ xhr.js:15 dispatchRequest @ dispatchRequest.js:51 _request @ Axios.js:187 request @ Axios.js:40 httpMethod @ Axios.js:226 wrap @ bind.js:5 renameConversation @ ChatTest.vue:160 onClick @ ChatTest.vue:21 callWithErrorHandling @ runtime-core.esm-bundler.js:199 callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:206 invoker @ runtime-dom.esm-bundler.js:729还是报错

也就是说前端应用无法调用后端API，因为后端没有正确设置CORS，

所以在后端进行相应的修改：

 

为前端端口指定相应的cors即可

最终实现效果：

点击重命名按钮：

在提示框内填入重命名的标题：

即可修改成功：