将 CORS 参数添加到 ExtJS AJAX

在使用 ExtJS 时，我们经常需要使用 AJAX 进行数据交互。但是，在进行跨域请求时，会面临 CORS（跨域资源共享）的问题。为解决这个问题，需要在 AJAX 请求中添加一些特定的参数。

CORS 是什么？

CORS（跨域资源共享）是一种机制，它允许 Web 应用服务器进行跨域访问控制，从而使跨域数据传输变得更加安全无忧。

在 AJAX 请求中添加 CORS 参数的步骤

1. 添加 ExtJS 的 AJAX 请求配置

在使用 ExtJS 的 AJAX 进行数据交互时，需要定义一个配置对象，以指定 AJAX 请求的一些参数，例如 url、method、params 等。

Ext.Ajax.request({
    url: 'https://www.example.com/api',
    method: 'GET',
    params: {
        key1: 'value1',
        key2: 'value2'
    }
});

2. 添加 withCredentials 参数

withCredentials 参数是 XMLHttpRequest 对象的一个属性，它用于指示在进行跨域请求时是否带上跨域的 cookie。

将 withCredentials 设置为 true 可以让 AJAX 请求带上跨域的 cookie，从而解决跨域访问被阻止的问题。

Ext.Ajax.request({
    url: 'https://www.example.com/api',
    method: 'GET',
    params: {
        key1: 'value1',
        key2: 'value2'
    },
    withCredentials: true
});

3. 添加 X-Requested-With 参数

X-Requested-With 参数是一个请求头，用于告诉服务器这是一个 AJAX 请求。一些服务器在接收到非 AJAX 请求时会拒绝响应，因此需要添加这个参数。

Ext.Ajax.request({
    url: 'https://www.example.com/api',
    method: 'GET',
    params: {
        key1: 'value1',
        key2: 'value2'
    },
    withCredentials: true,
    headers: {
        'X-Requested-With': 'XMLHttpRequest'
    }
});

总结

使用 ExtJS 进行 AJAX 请求时，需要在请求配置中添加 withCredentials 和 X-Requested-With 参数，以解决跨域访问被阻止的问题。这样可以让 AJAX 请求带上跨域的 cookie，并告诉服务器这是一个 AJAX 请求。