vue前端报错 strict-origin-when-cross-origin

引用[1]中提到的报错"strict-origin-when-cross-origin"是由浏览器的安全策略引起的。这个报错通常发生在前端使用HTTPS协议访问后端使用HTTP协议的接口时。

浏览器的安全策略要求在使用HTTPS协议的网页中，所有的资源请求（包括接口请求）都必须使用HTTPS协议。如果前端使用HTTPS协议访问后端使用HTTP协议的接口，浏览器会认为这是一个跨域请求，并且会按照安全策略进行处理，其中一种处理方式就是报错"strict-origin-when-cross-origin"。

解决这个问题的方法有两种：
. 将后端的接口也改为使用HTTPS协议。这样前端和后端的协议就一致了，不会触发跨域请求的安全策略。
2. 在前端的请求中添加跨域请求头。可以在请求中添加"Access-Control-Allow-Origin"头，将其值设置为"*"，表示允许来自任意域名的请求。这样浏览器就不会对跨域请求进行安全策略的处理了。

下面是一个示例代码，演示如何在前端请求中添加跨域请求头：

fetch('http://后端接口地址', {
  method: 'GET',
  headers: {
    'Access-Control-Allow-Origin': '*'
  }
})
  .then(response => response.json())
  .then(data => {
    // 处理返回的数据
  })
  .catch(error => {
    // 处理请求错误
  });

相关问题

vue2项目strict-origin-when-cross-origin

"strict-origin-when-cross-origin" 是浏览器的一个安全策略，用于保护用户的隐私和安全。当你在 Vue2 项目中使用跨域请求数据时，如果请求的地址不是同源（即协议、域名、端口号都不同），浏览器就会默认设置 "strict-origin-when-cross-origin"，导致请求失败。

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

1. 通过服务器端配置 CORS（跨域资源共享）：在服务器端设置响应头 Access-Control-Allow-Origin，允许指定的域名访问 API，这样在浏览器中就可以正常请求数据了。

2. 在 Vue2 项目中使用代理：在 vue.config.js 文件中配置 devServer.proxy，将请求代理到同源的接口上，这样就可以避免跨域问题。例如：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

上述配置将所有以 `/api` 开头的请求代理到本地的 3000 端口上。

vue前端怎么解决strict-origin-when-cross-origin

这个问题可以通过设置服务器的响应头来解决。具体来说，需要在服务器端设置Access-Control-Allow-Origin响应头，将其设置为允许访问的域名或者通配符"*"。这样就可以解决跨域问题了。另外，还可以使用JSONP、CORS等技术来解决跨域问题。