关于接口调用跨域问题的解决方案

原创于 2021-05-24 17:48:00 发布 · 2.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #javascript

常见问题同时被 2 个专栏收录

12 篇文章

订阅专栏

4 篇文章

订阅专栏

本文探讨了移动端开发中遇到的跨域问题，重点介绍了如何在服务器端设置`Access-Control-Allow-Origin`、`Access-Control-Allow-Credentials`，以及前端使用axios进行处理的方法。通过实例讲解，帮助开发者避免和解决这一常见问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们在移动端开发的时候，如果调用外部接口，容易出现跨域问题，问题如下：
在这里插入图片描述
英文描述：

The value of the ‘Access-Control-Allow-Origin’ header in the response
must not be the wildcard ‘*’ when the request’s credentials mode is
‘include’。

我们的解决方案：
1、服务器端设置：

Access-Control-Allow-Headers：Origin, Content-Type, cache-control,postman-token,Cookie, Accept
Access-Control-Allow-Origin:*,(如果是指定域名，可以设置https://www.google.com,https://www.baidu.com )
Access-Control-Allow-Credentials：true

2、前端程序设置

response.headers['Access-Control-Allow-Credentials'] = 'true'
response.headers['Access-Control-Allow-Origin'] = '*'
response.headers['Access-Control-Allow-Methods'] = 'POST'
response.headers['Access-Control-Allow-Headers'] = 'Content-Type, X-Requested-With'

3、VUE前端程序设置