XHR被cors阻止，The 'Access-Control-Allow-Origin' header contains multiple values

192.168.43.38/:1 Access to XMLHttpRequest at 'http://112.74.106.133/api/message/' from origin 'http://192.168.43.38:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header contains multiple values 'http://192.168.43.38:8080, *', but only one is allowed.

前端小白，因为后端服务器部署在阿里云上，而前端运行在本地，乍一看以为是跨域（浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域）问题，那就着手解决。

解决的方案有jsonp，cors，nginx等，试着用cors（跨域资源共享）解决。主要是服务端配置，后端我用的是Django，所以配置cors不难，后端pip3 install django-cors-headers，配置setting文件

# djangoVueCollector/settings.py
INSTALLED_APPS = [
    ...
    'corsheaders',
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'corsheaders.middleware.CorsMiddleware',
    ...
]

CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True

CORS_ALLOW_HEADERS = ' * '

然后还是不行，，细读之后发现Chrome开发者工具console说Access-Control-Allow-Origin太多了，应该只有一个，再看network确实是这样

在查看服务器nginx配置，进入nginx根目录cat nginx.config

后端的nginx之前照着网上配置的，果然header多了些东西，删除不必要的header，重启nginx

然后变成这样，改写前端的axios请求的header content-type

const instance = axios.create({
  baseURL: BASE_URL,
  headers: {'Content-Type': 'application/x-www-form-urlencoded'}
});

成功提交