vue同源策略禁止读取跨域请求

是的，Vue同源策略禁止读取跨域请求。同源策略是浏览器的一种安全机制，它限制了一个源的文档或脚本如何能够与另一个源的资源进行交互。如果两个资源不是同源（即协议、域名、端口号有任何一个不同），则默认情况下浏览器会禁止页面中的JavaScript代码访问另一个源的数据。这也就是为什么Vue应用不能直接读取跨域请求的原因。为了解决这个问题，可以使用代理服务器或者JSONP等技术来实现跨域请求。

相关问题

vue同源请求的跨域解决

在Vue中进行同源请求的跨域解决方法有以下几种：

1. 代理服务器：在开发环境下，可以通过配置代理服务器来实现跨域请求。在Vue的配置文件（vue.config.js）中添加以下代码：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://api.example.com', // 跨域请求的目标地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': '' // 将请求地址中的 '/api' 替换为空字符串
        }
      }
    }
  }
}

这样，当你在代码中发起以 '/api' 开头的请求时，Vue会将请求转发到目标地址，实现跨域请求。

2. JSONP：JSONP是一种通过动态创建<script>标签来实现跨域请求的方法。在Vue中，可以使用第三方库如`vue-jsonp`来实现JSONP跨域请求。

首先，安装`vue-jsonp`：

npm install vue-jsonp --save

然后，在Vue实例中使用`vue-jsonp`：

import Vue from 'vue'
import VueJsonp from 'vue-jsonp'

Vue.use(VueJsonp)

Vue.jsonp('http://api.example.com/api', { /* 请求参数 */ })
  .then(response => {
    // 处理返回的数据
  })
  .catch(error => {
    // 处理错误
  })

3. CORS（跨域资源共享）：如果服务器支持CORS，可以在服务器端设置响应头来实现跨域请求。在Vue中，只需要正常发起请求即可。

请注意，以上方法仅适用于开发环境下的跨域请求，生产环境中应该由服务器来处理跨域请求。

vue3 + vite 配置跨域请求

在 Vue3 中使用 Vite 进行跨域请求配置的步骤如下：

1. 在 `vite.config.js` 文件中添加以下代码：

export default {
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // 代理的目标地址
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '') // 将请求路径中的 /api 去掉
      }
    }
  }
}

2. 在 Vue3 组件中发起请求时，请求路径前加上 `/api` 前缀，如下：

// 发起 GET 请求
fetch('/api/data')
  .then(response => response.json())
  .then(data => console.log(data))

// 发起 POST 请求
fetch('/api/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ username: 'admin', password: '123456' })
}).then(response => response.json())
  .then(data => console.log(data))

这样配置后，Vite 会自动将请求转发到 `http://localhost:3000` 这个地址，从而实现跨域请求。注意，如果你使用的是 Vue CLI 来搭建项目，则需要在 `vue.config.js` 文件中进行配置。