ajax报错No 'Access-Control-Allow-Origin' header is present on the requested resource

当使用Ajax请求跨域资源时，可能会遇到"No 'Access-Control-Allow-Origin' header is present on the requested resource"的错误。这是因为浏览器执行跨域请求时会进行同源策略检查，如果服务器没有正确设置响应头，浏览器会拒绝访问。

解决这个问题的方法有多种，以下是两种常见的解决办法：

1. 使用代理服务器：可以通过在自己的服务器上设置一个代理来解决跨域问题。具体步骤如下：

// 在自己的服务器上创建一个代理接口
app.get('/proxy', function(req, res) {
  // 使用http模块发送请求到目标服务器
  http.get('http://目标服务器地址', function(response) {
    // 设置响应头，允许跨域访问
    res.setHeader('Access-Control-Allow-Origin', '*');
    // 将目标服务器的响应数据返回给客户端
    response.pipe(res);
  });
});

2. 在服务器端设置响应头：如果你有权限修改服务器端的代码，可以在服务器端设置响应头来解决跨域问题。具体步骤如下：

// 在服务器端设置响应头，允许跨域访问
res.setHeader('Access-Control-Allow-Origin', '*');

相关问题

ajax No 'Access-Control-Allow-Origin' header is present on the requested resource.

这个错误提示是由于跨域访问引起的。当使用 AJAX 发起跨域请求时，浏览器会发送一个 OPTIONS 请求给服务器，以检查服务器是否允许该跨域请求。如果服务器没有设置合适的响应头，浏览器就会报这个错误。

解决这个问题的方法有两种：

1. 在服务器端设置响应头
在服务器端设置响应头 "Access-Control-Allow-Origin"，并将其值设置为允许访问的域名。例如，如果你允许所有域名访问，可以将其设置为 "*"
示例代码（使用 Node.js 和 Express）：

   app.use(function(req, res, next) {
     res.header("Access-Control-Allow-Origin", "*");
     res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
     next();
   });

2. 使用代理
如果你无法在服务器端进行设置，可以尝试使用代理。通过设置一个与你的应用同域名的代理服务器，来转发请求到目标服务器，并将响应返回给你的应用。这样就可以避免跨域问题。
示例代码（使用 webpack-dev-server 的代理配置）：

   devServer: {
     proxy: {
       '/api': {
         target: 'http://api.example.com',
         pathRewrite: {'^/api' : ''}
       }
     }
   }

No 'Access-Control-Allow-Origin' header is present on the requested resource

这个错误是由于跨域问题引起的。跨域是指在浏览器中，当前端代码通过ajax请求访问不同域名或端口的后端接口时，浏览器会进行安全限制，检查响应头中是否包含了"Access-Control-Allow-Origin"字段。如果没有包含该字段，浏览器就会报错"No 'Access-Control-Allow-Origin' header is present on the requested resource"。\[2\]

解决这个问题的方法有多种。一种方法是在后端接口或配置文件中添加跨域代码，允许所有来源访问。例如，在后端接口中可以添加以下代码：

header('Access-Control-Allow-Origin: *');//允许所有来源访问
header('Access-Control-Allow-Method: POST, GET');//允许访问的方式

或者在过滤器中添加以下代码：

httpResponse.setHeader("Access-Control-Allow-Origin", "*");
httpResponse.setHeader("Access-Control-Allow-Credentials", "true");
httpResponse.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE");

这样就可以解决跨域问题了。\[1\]

另外，有时候出现跨域问题是因为配置了多次跨域。例如，在FileUtil中配置了一次，又在CorsFilter中配置了一次，导致出现了两个"Access-Control-Allow-Origin"字段。解决方法是删除其中一个配置即可。\[3\]
#### 引用[.reference_title]
- *1* *3* [No ‘Access-Control-Allow-Origin‘ header is present on the requested resource关于vue跨域问题](https://blog.csdn.net/qq_42212557/article/details/128197716)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [处理 No 'Access-Control-Allow-Origin' header is present on the requested resource 问题](https://blog.csdn.net/qq_37647296/article/details/89401499)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]