vue 403 Invalid CORS request

引用: CORS (Cross-Origin Resource Sharing)是一种浏览器的安全策略，用于控制跨域资源的访问。当浏览器发起跨域请求时，如果目标资源的响应头没有包含正确的CORS策略，浏览器会阻止该请求。错误信息"Access to XMLHttpRequest at 'http://10.1.1.1:8080/web-api/login' from origin 'http://xxx.com' has been blocked by CORS policy"提示你的请求被CORS策略拦截了。

引用: 出现这个错误的原因可能是你的代码中使用了写死的接口请求地址，并且该地址不是相对路径，而是绝对路径。为了避免CORS错误，你需要将这些写死的地址改为相对路径的方式，例如改为“/web-api/xxx”。

引用: 如果你的代码是基于Vue框架开发的，可以在配置文件（比如webpack配置文件）中设置API_ROOT为相对路径。例如，将API_ROOT设置为空字符串，HOST设置为"localhost"。

解决CORS错误的关键是确保请求的源和目标资源在同一个域下，或者目标资源的响应头包含了适当的CORS策略。请根据上述引用内容中提供的方法尝试解决你的问题。

相关问题

Vue应用请求SpringBoot API出现 CORS 跨域请求设置 Invalid CORS request错误

这个错误是因为浏览器的同源策略所导致的，同源策略要求请求的协议、域名、端口号必须全部匹配，否则就会出现跨域问题。

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

1. 在 SpringBoot 中配置 CORS。在 SpringBoot 的配置文件中，可以添加如下配置：

   @Configuration
   public class CorsConfig {
       @Bean
       public WebMvcConfigurer corsConfigurer() {
           return new WebMvcConfigurer() {
               @Override
               public void addCorsMappings(CorsRegistry registry) {
                   registry.addMapping("/**")
                           .allowedOrigins("*")
                           .allowedMethods("*")
                           .allowedHeaders("*");
               }
           };
       }
   }

这段代码表示允许所有来源（`allowedOrigins("*")`）、所有方法（`allowedMethods("*")`）和所有请求头（`allowedHeaders("*")`）的跨域请求。

2. 在 Vue 应用中使用代理。在 Vue 应用的 `config/index.js` 文件中，可以添加如下配置：

   module.exports = {
     dev: {
       proxyTable: {
         '/api': {
           target: 'http://localhost:8080',
           changeOrigin: true,
           pathRewrite: {
             '^/api': '/api'
           }
         }
       }
     }
   }

这段代码表示将所有以 `/api` 开头的请求代理到 `http://localhost:8080`，并开启跨域请求支持（`changeOrigin: true`）。在 Vue 应用中，请求的 URL 可以写成 `/api/xxx` 的形式，这样就会被代理到目标服务器。

vue2解决cors跨域问题

Vue.js 本身并不直接处理CORS跨域问题，因为这通常是服务器端的配置问题，与前端框架无关。但是，当在Vue应用中进行API请求时，特别是使用axios等库进行HTTP通信时，可能会遇到跨域限制。Vue2可以通过以下几种方式来间接解决这个问题：

1. **JSONP（不推荐）**：在后端支持下，通过动态创建`<script>`标签并设置`src`属性为服务器提供的JSONP接口，这种方式适用于GET请求且目标域名与当前域名同源的情况。

2. **代理（推荐）**：在开发阶段，可以利用`vue-cli`的`proxyTable`配置，将所有针对非同源API的请求代理到同一域名或特定路径的服务器上。这需要在开发服务器启动时开启。

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'https://your-backend-server.com', // 要代理的目标URL
        changeOrigin: true,
        ws: true, // 如果是WebSocket请求
        pathRewrite: { '^/api': '' } // 重写请求路径
      }
    }
  }
}

3. **CORS服务器中间件**：在生产环境中，后端应用需要设置CORS头来允许跨域请求。比如在Node.js的Express中，可以添加以下中间件：

app.all('*', function(req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET,POST,PUT,DELETE');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, X-Requested-With');
  // 其他CORS相关的头部设置
  next();
});