vue请求controller报错has been blocked by CORS policy

你遇到的问题是跨域错误，即前端通过Vue请求后端的Controller时出现了被CORS策略阻止的报错。这个错误通常是由于浏览器的同源策略所导致的。同源策略限制了不同源(协议、域名、端口)之间的资源访问。解决这个问题有几种方法。

一种方法是在后端的Controller上添加跨域注解@CrossOrigin。这个注解可以让外界直接访问到这个Controller层。但是需要在每一个Controller都添加这个注解，可能会比较麻烦。

另一种方法是创建一个CorsConfig类，继承WebMvcConfigurer，并重写addCorsMappings方法。在这个方法中，可以设置允许跨域的路径、允许跨域请求的域名、是否允许证书、允许的请求方法、允许的请求头和跨域允许时间。这样可以统一配置跨域规则，而不需要在每个Controller上添加注解。

另外，还可以尝试将请求的Content-Type设置为表单类型，以避免CORS跨域错误。具体做法是在请求的headers中设置'Content-Type':'application/x-www-form-urlencoded'。

这些方法都可以在不同情况下解决CORS跨域问题，你可以根据自己的项目需求选择其中的一种方法进行尝试。<span class="em">1</span><span class="em">2</span><span class="em">3</span>

相关问题

Vue报错has been blocked by CORS policy怎么解决

出现这个错误是因为浏览器的同源策略（Same Origin Policy）限制，Vue应用在跨域请求数据时被浏览器拦截了。解决这个问题有几种方法：

1. 在后端设置允许跨域访问。可以在后端服务器的响应头中添加 Access-Control-Allow-Origin 字段，允许指定的域名访问数据。

2. 使用代理。在 Vue 应用中配置一个代理，将请求转发到后端服务器，避免跨域问题。可以使用 Vue 自带的代理插件 vue-cli-plugin-proxy 或者自己手动配置代理。

3. 使用 JSONP。JSONP 是一种跨域请求数据的方法，可以通过动态创建 script 标签来获取数据，但只支持 GET 请求。

4. 使用 CORS 跨域资源共享。CORS 是一种新的跨域请求数据的方式，可以在前端和后端同时进行设置，支持各种类型的请求，但需要浏览器支持。

以上是解决 Vue 报错has been blocked by CORS policy 的几种方法，具体需要根据项目情况选择合适的方式进行解决。

vue 图片请求报错has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

这个错误通常是由于浏览器的安全策略引起的。浏览器默认情况下不允许从一个源（例如：http://example.com）请求另一个源（例如：http://api.example.com）的资源，除非响应头中包含了正确的跨域资源共享（CORS）标头。

要解决这个问题，你可以在服务器端添加相应的响应头来允许跨域请求。在返回图片资源时，服务器需要设置`Access-Control-Allow-Origin`标头为允许访问的域名或使用通配符`*`来允许所有域名访问。

下面是一个示例，可以通过在服务器端设置响应头来解决跨域问题：

// Express.js 示例
const express = require('express');
const app = express();

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  next();
});

// 处理图片请求
app.get('/image', (req, res) => {
  // 返回图片
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

请注意，使用通配符`*`允许所有域名访问可能存在安全风险。在实际生产环境中，应该根据实际需求设置合适的`Access-Control-Allow-Origin`值。

如果你无法更改服务器端的设置，你也可以尝试使用代理服务器或者在开发环境中启用跨域请求的配置。具体方法可能会根据你使用的开发工具和服务器环境而有所不同。