xhr.js:196 Refused to set unsafe header "Origin" axios请求添加不了Origin

浏览器会阻止设置某些头字段，例如 Origin、Referer 等，以确保安全性。在您的情况下，浏览器阻止设置 Origin 头，因为这被认为是不安全的。

如果您需要设置 Origin 头，可以通过在服务端进行设置来实现。例如，在 Node.js 中，可以使用 `cors` 模块来设置允许的来源，以及允许的头字段。示例代码如下：

const cors = require('cors');
const express = require('express');
const app = express();

const corsOptions = {
  origin: 'https://example.com', // 允许的来源
  optionsSuccessStatus: 200 // 选项请求成功的状态码
};

app.use(cors(corsOptions));

// 在这里添加您的路由和处理程序

在客户端发送请求时，不需要设置 Origin 头，浏览器会自动添加。如果您需要设置其他头字段，例如自定义的头字段，可以使用 `headers` 选项来设置。示例代码如下：

axios.get('/api/data', {
  headers: {
    'X-Custom-Header': 'value'
  }
})

相关问题

uni-h5.es.js:19466 Refused to set unsafe header "Cookie"

这是一个浏览器的安全特性，在 JavaScript 中不能直接设置一些 HTTP 头，如 Cookie、Host 等。这是为了防止恶意脚本盗取用户的敏感信息。如果您需要设置 Cookie，可以考虑通过服务器端来设置，或者使用浏览器提供的 API，如 document.cookie。如果您确定这个请求需要设置 Cookie 头，您可以尝试使用 XHR 的 withCredentials 属性来开启跨域请求时发送 Cookie。

Access to XMLHttpRequest at 'http://localhost:8080/springprojecttraining/api/updateUser' from origin 'http://localhost:8081' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. xhr.js:160 POST http://localhost:8080/springprojecttraining/api/updateUser net::ERR_FAILED 200 dispatchXhrRequest @ xhr.js:160 xhrAdapter @ xhr.js:11 dispatchRequest @ dispatchRequest.js:59 Promise.then (async) request @ Axios.js:51 Axios.<computed> @ Axios.js:71 wrap @ bind.js:9 submitForm @ user.vue:346 click @ user.vue:407 invokeWithErrorHandling @ vue.esm.js:3735 invoker @ vue.esm.js:1552 invokeWithErrorHandling @ vue.esm.js:3735 Vue.$emit @ vue.esm.js:2821 handleClick @ element-ui.common.js:9465 invokeWithErrorHandling @ vue.esm.js:3735 invoker @ vue.esm.js:1552 original_1._wrapper @ vue.esm.js:8013 createError.js:16 Uncaught (in promise) Error: Network Error at createError (createError.js:16:1) at XMLHttpRequest.handleError (xhr.js:69:1)为什么报错 如何解决呢

这是因为浏览器实施了同源策略（Same-Origin Policy）限制，导致从一个源访问另一个源时会被拒绝，特别是在前端使用JavaScript发起Ajax请求时。在这种情况下，需要进行跨域资源共享（CORS）配置。

解决方法如下：

1. 在服务器端配置CORS，允许指定的源或所有源访问：

- 允许指定源访问：

在服务器端的响应中添加Access-Control-Allow-Origin头，指定允许访问的源，例如：

Access-Control-Allow-Origin: http://localhost:8081

- 允许所有源访问：

在服务器端的响应中添加Access-Control-Allow-Origin头，指定允许所有源访问，例如：

Access-Control-Allow-Origin: *

2. 在前端使用代理服务器（Proxy）转发请求，以绕过浏览器的同源策略限制。

例如，使用Vue.js，可以在vue.config.js中添加以下配置：

module.exports = {
  devServer: {
    proxy: {
      '/springprojecttraining': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
}

这样，在前端使用axios等工具时，只需要将请求的URL改为代理服务器地址，例如：

axios.post('/springprojecttraining/api/updateUser', data)

这样就可以解决跨域问题了。