想將react項目接上老師的koa2後端項目,遇到CORS問題

想將react項目接上老師的koa2後端項目,遇到CORS問題

# 具体遇到的问题
CORS問題無法解決,React前端項目和後端koa2項目之間無法傳遞cookie。
# 报错信息的截图
Access to XMLHttpRequest at 'http://35.229.221.230:3000/comment/create' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
# 尝试过的解决思路和结果

  1. 嘗試取消前端axios.defaults.withCredentials = true,如此就不會出現報錯。API可以正常使用,但卻會產生新的問題--cookie無法傳遞,導致登入後的寫文章身分驗證無法通過。(但如果是用postman就不會有這些問題,cookie可以正常運作

  2. 我的後端API都已上傳到GCP,可供老師測試。

  3. 所以我覺得應該還是跨域的問題要解決,試過很多方式都未果,拜託熟習 REACT和KOA2的老師了Q_Q


# 粘贴全部相关代码,切记添加代码注释(请勿截图)

//服務端代碼   與課堂上老師教學同

app.use(

  cors({

    origin: "http://localhost:3000"//支持前端哪個域,可以跨域

    credential: true//允许跨域的时候带着 cookie    

  })

);


//前端代碼  留言請求

export const postArticle = (titlecontentimgUrl=> {

    return (dispatch=> {

    //   axios.defaults.withCredentials = true;

            axios

              .post("http://35.229.221.230:3000/comment/create", {

                title,

                content,

                imageUrl: imgUrl,

              })

          .then((res=> {

            dispatch(postArticleAction(1));

          })

          .catch((err=> {

            dispatch(postArticleAction(2));

          });

    }       

    

}


//登入請求

export const login = (accountpassword=> {

    return (dispatch=> { 

        // axios.defaults.withCredentials = true;

        axios.post("http://35.229.221.230:3000/users/login",{

            username: account,

            password})

            .then((res=> {

                const result = res.data.succsess;

          dispatch(changeLogin(result, account, password));

        })

    

    }       


正在回答

登陆购买课程后可参与讨论,去登陆

2回答

同学你好,问题解答如下:

1、老师这边不设置allowMethods: ["GET", "POST", "DELETE"]属性就能正常获取到数据,这个属性是用来配置允许跨域的方法的,如果添加上能够解决问题就可以。

2、如果想要这个网站所有人都连上,需要发布部署,购买服务器,配置域名等。有免费课程教学,感兴趣的话可以看看:

https://www.imooc.com/learn/1004

祝学习愉快!

好帮手慕星星 2020-10-22 14:44:50

同学你好,首先react项目测试本身存在登录不成功的问题,是由于Chrome80版本请求接口未携带cookie导致的。因为浏览器升级后对跨域接口默认的安全策略变了,需要手动修改策略,打开谷歌浏览器,地址栏输入chrome://flags/ ,然后再弹出的页面中输入SameSite,把第一个改为disable,重启浏览器

http://img1.sycdn.imooc.com//climg/5f9129b909c2130e12210434.jpg

再测试就可以登录。

这样操作之后老师测试没有跨域的错误,只是返回提示‘不登陆成功’,添加上同学这句话后

  axios.defaults.withCredentials = true;,就可以成功了,建议再测试下。

祝学习愉快!

  • 提问者 weixin_慕雪0272820 #1
    老師 我chrome瀏覽器預設就是你說的設定了,所以問題沒有解決。而且我希望這網站能讓所有人都連上,所以如果只能在我自己的瀏覽器上解決沒用吧? 有解決方法嗎>_<? 謝謝老師
    2020-10-22 14:59:13
  • 提问者 weixin_慕雪0272820 #2
    這問題我搞定了QQ app.use( cors({ origin: ["http://localhost:3000"], credentials: true, allowMethods: ["GET", "POST", "DELETE"], }) ); 服務器端設置method就可以了@@但是是為什麼呢
    2020-10-22 16:34:44
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
5. Node.js全栈开发
  • 参与学习           人
  • 解答问题       307    个

前端工程师会后端开发已是趋势。从node.js到koa2再到数据库知识。结合真实项目,从项目需求分析、接口和数据设计到业务开发,帮你打通前后端任督二脉,为就业加码。

了解课程
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师