localhost dev mode can't access backend api because of cors

[SealinGp]

i follow the https://casdoor.org/docs/basic/server-installation for local dev .then i got this cors error.

my app.conf file content

appname = casdoor
httpport = 8000
runmode = dev
copyrequestbody = true
driverName = mysql
dataSourceName = root:a123456@tcp(127.0.0.1:3306)/
dbName = casdoor
tableNamePrefix =
showSql = true
redisEndpoint =
defaultStorageProvider = 
isCloudIntranet = false
authState = "casdoor"
socks5Proxy = "127.0.0.1:10082"
verificationCodeTimeout = 10
initScore = 2000
logPostOnly = false
origin = "http://localhost:7001"
staticBaseUrl = "https://cdn.casbin.org"
isDemoMode = false
batchSize = 100
ldapServerPort = 389
languages = en,zh,es,fr,de,ja,ko,ru
quota = {"organization": -1, "user": -1, "application": -1, "provider": -1}

[casbin-bot]

@seriouszyx @ComradeProgrammer @Resulte

[SealinGp]

it will be fixed in my case if i change code like this

const (
	headerOrigin           = "Origin"
	headerAllowOrigin      = "Access-Control-Allow-Origin"
	headerAllowMethods     = "Access-Control-Allow-Methods"
	headerAllowHeaders     = "Access-Control-Allow-Headers"
	headerAllowCredentials = "Access-Control-Allow-Credentials"
)

func CorsFilter(ctx *context.Context) {
	origin := ctx.Input.Header(headerOrigin)
	originConf := conf.GetConfigString("origin")

	if origin == originConf {
		ctx.Output.Header(headerAllowOrigin, origin)
		ctx.Output.Header(headerAllowMethods, "POST, GET, OPTIONS")
		ctx.Output.Header(headerAllowHeaders, "Content-Type, Authorization")
		ctx.Output.Header(headerAllowCredentials, "true")

		if ctx.Input.Method() == "OPTIONS" {
			ctx.ResponseWriter.WriteHeader(http.StatusOK)
		}
		return
	}

	// if origin != "" && originConf != "" && origin != originConf {
	// 	if object.IsAllowOrigin(origin) {
	// 		ctx.Output.Header(headerAllowOrigin, origin)
	// 		ctx.Output.Header(headerAllowMethods, "POST, GET, OPTIONS")
	// 		ctx.Output.Header(headerAllowHeaders, "Content-Type, Authorization")
	// 	} else {
	// 		ctx.ResponseWriter.WriteHeader(http.StatusForbidden)
	// 		return
	// 	}

	// 	if ctx.Input.Method() == "OPTIONS" {
	// 		ctx.ResponseWriter.WriteHeader(http.StatusOK)
	// 		return
	// 	}
	// }
}

[hsluoyz]

@ziranl16

[ziranl16]

@SealinGp Hi, may I ask which release version did you clone?

[SealinGp]

@SealinGp Hi, may I ask which release version did you clone?

commit: 26acece
branch: master
tag: v1.189.0

[ziranl16]

Hi @SealinGp , I tried to replicate the issue locally(win10) but mine seems to be working fine with all the recent commits in the master branch. I have searched online for relevant solutions, maybe you could also look at this extension Allow CORS: Access-Control-Allow-Origin to resolve the issue instead of changing the code directly?

Moreover, would you mind seeing if you could successfully deploy earlier commits?

[ziranl16]

@SealinGp I think this issue is also similar to #1355 , maybe you can also have a look?

[SealinGp]

Hi @SealinGp , I tried to replicate the issue locally(win10) but mine seems to be working fine with all the recent commits in the master branch. I have searched online for relevant solutions, maybe you could also look at this extension Allow CORS: Access-Control-Allow-Origin to resolve the issue instead of changing the code directly?

Moreover, would you mind seeing if you could successfully deploy earlier commits?

your origin conf is empty ? can you show me the origin config value ?

[ziranl16]

your origin conf is empty ? can you show me the origin config value ?

yes,

appname = casdoor
httpport = 8000
runmode = dev
copyrequestbody = true
driverName = postgres
dataSourceName = "user=postgres password=123456 host=localhost port=5432 sslmode=disable dbname=casdoor"
dbName =
tableNamePrefix =
showSql = false
redisEndpoint =
defaultStorageProvider = 
isCloudIntranet = false
authState = "casdoor"
socks5Proxy = "127.0.0.1:10808"
verificationCodeTimeout = 10
initScore = 2000
logPostOnly = true
origin =
staticBaseUrl = "https://cdn.casbin.org"
isDemoMode = false
batchSize = 100
ldapServerPort = 389
languages = en,zh,es,fr,de,ja,ko,ru
quota = {"organization": -1, "user": -1, "application": -1, "provider": -1}

[SealinGp]

your origin conf is empty ? can you show me the origin config value ?

yes,

appname = casdoor
httpport = 8000
runmode = dev
copyrequestbody = true
driverName = postgres
dataSourceName = "user=postgres password=123456 host=localhost port=5432 sslmode=disable dbname=casdoor"
dbName =
tableNamePrefix =
showSql = false
redisEndpoint =
defaultStorageProvider = 
isCloudIntranet = false
authState = "casdoor"
socks5Proxy = "127.0.0.1:10808"
verificationCodeTimeout = 10
initScore = 2000
logPostOnly = true
origin =
staticBaseUrl = "https://cdn.casbin.org"
isDemoMode = false
batchSize = 100
ldapServerPort = 389
languages = en,zh,es,fr,de,ja,ko,ru
quota = {"organization": -1, "user": -1, "application": -1, "provider": -1}

maybe you should start web server to access the page, then you can get this error, i still got the same error using your config file.

the below operation previous required:

• nvm-windows

here are my steps to start web dev server(after installed nvm-windows).

1. web/src/Setting.js set backend api url

export const ServerUrl = "http://localhost:8000";

2. install dependencies & start web server

# assume you located in /xxx/casdoor dir
pwd=$PWD
cd $pwd/web && nvm install v16.10.0 && nvm use v16.10.0 && npm install --global yarn && yarn install && yarn start

then access http://localhost:7001/ and press F12 to see the console log

[ziranl16]

Hi @SealinGp , yup I started the frontend & backend service using the commands as shown below. Doesn't seem to have this error. I installed Go 1.6+, Node.js LTS (16 or 14), and Yarn 1.x

[SealinGp]

Hi @SealinGp , yup I started the frontend & backend service using the commands as shown below. Doesn't seem to have this error. I installed Go 1.6+, Node.js LTS (16 or 14), and Yarn 1.x

i'm confused. can i see your web/src/Setting.js file content ?

[ziranl16]

@SealinGp okay I now can replicate the error and have found the key part. In web/src/Setting.js, if the ServerUrl is empty, everything works fine. Else it results in CORS error. For your convenience, you can first leave web/src/Setting.js without modifications when running locally. I will debug the issue later.

[SealinGp]

@SealinGp okay I now can replicate the error and have found the key part. In web/src/Setting.js, if the ServerUrl is empty, everything works fine. Else it results in CORS error. For your convenience, you can first leave web/src/Setting.js without modifications when running locally. I will debug the issue later.

i figure it out, just shutdown the local nginx server will be normal. thanks for your help. ^_^

[ziranl16]

@SealinGp okay I now can replicate the error and have found the key part. In web/src/Setting.js, if the ServerUrl is empty, everything works fine. Else it results in CORS error. For your convenience, you can first leave web/src/Setting.js without modifications when running locally. I will debug the issue later.

i figure it out, just shutdown the local nginx server will be normal. thanks for your help. ^_^

No problem! 👍