I deploy my service in my own computer and it all works very well and I decided to put it on my server. But I find some request are restricted by 'CORS' and some are not.
The web server is Nginx deployed on the Linux. The backend framework is Django, with DRF provided the api service.The frontend framework is Vue.js.And the Ajax request library is using 'axios'.
The code runs very perfect on my own Mac and have no CORS problem. But it got problem on the server.
By the way, the mode for the route in Vue.js is history
mode.
Here is my Nginx configure code:
server {
listen 80;
server_name 167.179.111.96;
charset utf-8;
location / {
root /root/blog-frontend/dist;
try_files $uri $uri/ @router;
index index.html;
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods *;
}
location @router {
rewrite ^.*$ /index.html last;
}
}
Here is my Vue.js code that has the 'CORS' problem.
main.js
Vue.prototype.API = api
Vue.prototype.GLOBAL = global
Vue.prototype.$axios = Axios;
Axios.defaults.headers.get['Content-Type'] = 'application/x-www-form-urlencoded'
Axios.defaults.headers.post['Content-Type'] = 'multipart/form-data'
redirect.vue
<template>
<div id="notfound">
<div class="notfound">
<div class="notfound-404">
<h1>Redirect</h1>
</div>
<h2>Wait a few seconds, page is redirecting</h2>
<p>You are logging...authorization code is {{code}}</p>
</div>
</div>
</template>
<script>
export default {
name: 'redirect',
data(){
return{
code:''
}
},
created () {
this.code = this.$route.query.code
this.$axios({
method: 'get',
url: this.API.oauth_redirect,
params:{
code:this.code
},
}).then((response)=>{
if (response.data.status===200){
this.$message.success('login success')
let data = response.data.data
this.$store.commit('SET_TOKEN', data['token'])
this.$store.commit('SET_USER', data)
}
else{
console.log(response.data.msg)
this.$message.error(response.data.msg)
}
this.$router.go(-1)
})
}
}
</script>
My backend codes: middleware.py
from django.utils.deprecation import MiddlewareMixin
CORS = {
'Access-Control-Allow-Headers': '*',
'Access-Control-Allow-Methods': '*',
'Access-Control-Allow-Origin': '*'
}
class MyMiddle(MiddlewareMixin):
def process_response(self, request, response):
if request.method == 'OPTIONS':
response['Access-Control-Allow-Methods'] = CORS['Access-Control-Allow-Methods']
response['Access-Control-Allow-Headers'] = CORS['Access-Control-Allow-Headers']
response['Access-Control-Allow-Origin'] = CORS['Access-Control-Allow-Origin']
return response
settings.py
import os
# production environment
if os.environ['LOGNAME'] == 'weiziyang':
CLIENT = 'https://localhost:8080'
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'OPTIONS': {
'database': 'mysite',
'user': 'root',
'password': '********',
'charset': 'utf8mb4',
},
}
}
GITHUB_CLIENT_ID = '7198b5e59a7094f2a198'
GITHUB_CLIENT_SECRET = '***********'
else:
CLIENT = 'https://167.179.111.96:80'
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'OPTIONS': {
'database': 'mysite',
'user': 'root',
'password': '******',
'charset': 'utf8mb4',
'init_command': 'SET storage_engine=INNODB;'
},
}
}
GITHUB_CLIENT_ID = '83539caeb4c865d8f3e6'
GITHUB_CLIENT_SECRET = '***********'
# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
AUTH_USER_MODEL = 'user.BlogUsers'
CORS_ORIGIN_ALLOW_ALL = False
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_WHITELIST = (
'http://127.0.0.1:8080',
'http://localhost:8080',
'http://167.179.111.96:80',
'http://167.179.111.96'
)
ALLOWED_HOSTS = ['*']
CORS_ALLOW_METHODS = (
'GET',
'POST',
'PUT',
'PATCH',
'DELETE',
'OPTIONS'
)
CORS_ALLOW_HEADERS = (
'x-requested-with',
'content-type',
'accept',
'origin',
'authorization',
'x-csrftoken'
)
The expected result should not contain any CORS problem because I have tested them all on my own PC. But the error messages I got are:
Access to XMLHttpRequest at 'http://167.179.111.96:8000/user/info/?token=714ae00539a1e66642ea815722908477e4b4e07a' from origin 'http://167.179.111.96' 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.