development site: "CSRF Failed: CSRF token missing or incorrect" when posting with domain ohshown.site

[tai271828]

Describe the bug When creating ohshown event with the domain ohshown.site, the posting will fail and get "CSRF Failed: CSRF token missing or incorrect".

To Reproduce Steps to reproduce the behavior:

1. Go to the development site
2. Create an ohshown event as usual

Expected behavior Created ohshown event.

Additional context

1. If we use the url with IP, it will be successful
2. Get the message "CSRF Failed: CSRF token missing or incorrect" with your browser in development mode. Take chrome as example, press F12, then go to Network, and then check preview or Response.

[tai271828]

fwiw, I thought it was ALLOWED_HOSTS issue.

[tai271828]

hypothesis: this seems to be raised by the approach of docker container deployment. That said, POST to ohshown.site may change domain from ohshown.site to localhost when creating ohshown events.

Next step:

1. check if vue.config.js makes sense (frontend)
2. check if CSRF manipulation makes sense in django (backend)

fwiw: Both settings below could reproduce the issue:

diff --git a/vue.config.js b/vue.config.js
index 0c5fdb6..0ebc773 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -4,7 +4,7 @@ module.exports = {
     disableHostCheck: true,
     proxy: {
       '/server': {
-        target: 'http://localhost:8888',
+        target: 'http://ohshown.site:8888',
         changeOrigin: true,
         pathRewrite: {
           '^/server': ''

[tai271828]

I am still figuring out what's going on. Currently I use postman to help me debug. Let me brief the approach here for anyone who may be interested in:

1. get the payload from your browser (see below for chrome as example)
2. post the payload in the raw-JSON of postman

[tai271828]

Direct post via postman and port 8888 works properly. That said, CSRF is not warned by django.

My possible next step: focus on how vue deals with the proxy with the corresponding .env.

I am still figuring out what's going on. Currently I use postman to help me debug. Let me brief the approach here for anyone who may be interested in:

1. get the payload from your browser (see below for chrome as example)
2. post the payload in the raw-JSON of postman

[tai271828]

@Neilxx @yanghaochang104 I am a bit blocked and confused by this. If you are familiar with the settings of vue.config.js. Do you have any idea about this issue?

Direct post via postman and port 8888 works properly. That said, CSRF is not warned by django.

My possible next step: focus on how vue deals with the proxy with the corresponding .env.

I am still figuring out what's going on. Currently I use postman to help me debug. Let me brief the approach here for anyone who may be interested in:

1. get the payload from your browser (see below for chrome as example)
2. post the payload in the raw-JSON of postman

[Neilxx]

@tai271828 I'm a little bit confused. I just post successfully on development site.

Am I reproduce the issue correctly?

[tai271828]

Wow, that's weird. I think you did try to reproduce the issue correctly, but for "reasons" it worked for you but not for me.

This sounds a good news to me. I will check my settings locally. Thank you for retesting it!

@tai271828 I'm a little bit confused. I just post successfully on development site.

Am I reproduce the issue correctly?

[tai271828]

Close this issue

I retested with two different profiles of my chrome browser:

• the profile I used mostly will fail
• the profile that never visit the development site will succeed

I will close this issue. Feel free to reopen the issue when it happens again.

Additional information

fwiw, the current vue.config.js of the staging site is:

diff --git a/vue.config.js b/vue.config.js
index 0c5fdb6..0ebc773 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -4,7 +4,7 @@ module.exports = {
     disableHostCheck: true,
     proxy: {
       '/server': {
-        target: 'http://localhost:8888',
+        target: 'http://ohshown.site:8888',
         changeOrigin: true,
         pathRewrite: {
           '^/server': ''

I guess my browser may catch the old CSRF token and not update for new vue.config.js.

[tai271828]

@Neilxx thanks for retesting. You really saved my day lollllllllllllllllll

[Neilxx]

happy to help! 😙

[tai271828]

Just for the record: the issue happened to me again today, but switching to the other profile of my chrome still works. Hooray!