Axios 如何处理 cros 问题？

当我们谈论跨域资源共享（CORS）问题时，我们指的是一种安全机制，该机制允许或限制在一个域中运行的Web应用程序获取另一个域上托管的资源。默认情况下，浏览器禁止从脚本内发起的跨源HTTP请求，这是一项称为同源策略的安全措施。

在使用Axios时，如果遇到CORS问题，通常意味着尝试从客户端（例如在浏览器中运行的JavaScript代码）访问不同域的服务时遇到了跨域请求限制。处理这一问题的方法有以下几种：

1. 服务器端设置CORS头

最常见和推荐的方法是在服务器端配置CORS。服务器必须在响应中包含适当的CORS头，如Access-Control-Allow-Origin。这样，服务器就可以明确允许特定的域进行跨域请求。

示例：

假设你的客户端代码运行在http://client.example.com，而你试图通过Axios向http://api.example.com/data发送请求。服务器端需要在响应中包含以下头信息：

http
Access-Control-Allow-Origin: http://client.example.com

或者，如果你想允许任何域对服务器资源的访问，可以设置：

http
Access-Control-Allow-Origin: *

2. JSONP

对于旧的服务器或当你没有权限更改服务器配置时，可以使用JSONP（JSON with Padding）来绕过CORS限制。不过，请注意，JSONP只支持GET请求，并且不是一种安全的解决方案，因为它容易受到XSS攻击。Axios本身不支持JSONP，因此，你可能需要使用其他库。

3. 代理服务器

另一个解决方式是使用代理服务器。你可以设置一个代理服务器，所有的客户端请求先发到这个代理服务器，由代理服务器转发请求到目标服务器，并将响应返回给客户端。这样，因为所有请求都是通过同一个域发起的，CORS问题就不存在了。

在开发环境中，像webpack-dev-server等工具通常提供了代理功能。

示例：

javascript
// webpack.config.js
module.exports = {
  // ...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://api.example.com',
        changeOrigin: true,
      },
    },
  },
};

通过以上任一方式，都可以在使用Axios时解决CORS问题。然而，在生产环境中推荐的做法仍然是通过服务器端设置CORS头，因为这是最为直接和安全的方式。

您的服务器应该启用跨源请求，而不是客户端。为此，您可以检查这个漂亮的页面，其中包含多个平台的实现和配置

只是为那些可能通过谷歌搜索到达这里的人指出我的解决方案。我通过在调用中withCredentials设置为解决了 CORS 问题（当从浏览器中的 UI 调用外部 api 时）：false``axios

shell
axios({
    method: 'get',
    url: `https://api.someurl.com/subject/v2/resource/somevalue`,
    withCredentials: false,
    params: {
      access_token: SECRET_TOKEN,
    },
  });

在这种情况下，外部 api 端点的安全性基于access_token.

可能对某人有帮助：

我正在将数据从react应用程序发送到golang服务器。

一旦我改变了这个，w.Header().Set("Access-Control-Allow-Origin", "*")错误就被修复了。

反应表单提交功能：

shell
async handleSubmit(e) {
    e.preventDefault();
    
    const headers = {
        'Content-Type': 'text/plain'
    };

    await axios.post(
        'http://localhost:3001/login',
        {
            user_name: this.state.user_name,
            password: this.state.password,
        },
        {headers}
        ).then(response => {
            console.log("Success ========>", response);
        })
        .catch(error => {
            console.log("Error ========>", error);
        }
    )
}

Go 服务器有 Router，

shell
func main()  {
    router := mux.NewRouter()

    router.HandleFunc("/login", Login.Login).Methods("POST")

    log.Fatal(http.ListenAndServe(":3001", router))
}

登录.go,

shell
func Login(w http.ResponseWriter, r *http.Request)  {

    var user = Models.User{}
    data, err := ioutil.ReadAll(r.Body)

    if err == nil {
        err := json.Unmarshal(data, &user)
        if err == nil {
            user = Postgres.GetUser(user.UserName, user.Password)
            w.Header().Set("Access-Control-Allow-Origin", "*")
            json.NewEncoder(w).Encode(user)
        }
    }
}

我遇到了同样的问题。当我更改内容类型时，它已经解决了。我不确定这个解决方案对您有帮助，但也许是。如果您不介意内容类型，它对我有用。

shell
axios.defaults.headers.post['Content-Type'] ='application/x-www-form-urlencoded';

我在处理 Vue.js 项目时遇到了相同的 CORS 错误。您可以通过构建代理服务器来解决此问题，或者另一种方法是禁用浏览器（例如 CHROME）的安全设置来访问跨源 api（这是临时解决方案，不是解决问题的最佳方法）。这两种解决方案都对我有用。后面的解决方案不需要构建任何模拟服务器或代理服务器。这两种方案都可以在前端解决。

您可以通过在终端上键入以下命令来禁用从源访问 api 的 chrome 安全设置：

shell
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --user-data-dir="/tmp/chrome_dev_session" --disable-web-security

在终端上运行上述命令后，将打开一个禁用安全设置的新 chrome 窗口。现在，再次运行您的程序 (npm runserve / npm run dev)，这次您将不会收到任何 CORS 错误，并且能够使用 axios 获取请求。

希望这可以帮助！