vuecli设置header origin

Vue CLI是一个用于快速搭建Vue.js项目的脚手架工具，常常用来创建单页应用程序。在开发过程中，有时候我们需要设置header origin，以允许跨域访问。这可以通过设置Vue CLI的代理来实现。

首先，在你的vue.config.js文件中定义代理，例如：

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

我们使用了一个目标地址为'http://localhost:3000'的代理服务器，该服务器将接收以'/api'开头的请求，并自动将其转发到目标服务器。

注意，我们也需要将'changeOrigin'属性设置为'true'，以允许发送跨域请求。

此外，我们还使用了'pathRewrite'属性，将请求路径中的'/api'替换为空字符串, 以对目标服务器发出正确的请求。

通过定义这样的代理设置，Vue CLI将可以成功的跨域访问，并在development模式下自动启用。请记住，这只是在开发过程中使用，生产环境需要更加安全的跨域访问策略。

相关问题

vue No 'Access-Control-Allow-Origin' header is present on the requested resource.

当在Vue应用中发起跨域请求时，可能会遇"No 'Access-Control-Allow-Origin' header is present on the requested resource"的错误。这是由于浏览器的同源策略所导致的安全限制。

同源策略要求浏览器只能向同一域名、端口和协议发起请求，而不能跨域请求。当Vue应用向不同域名或端口发起请求时，浏览器会发送一个预检请求（OPTIONS请求）来检查服务器是否允许跨域请求。

要解决这个问题，可以在服务器端进行配置，允许跨域请求。以下是一些解决方法：

1. 在服务器端设置响应头：在服务器端的响应中添加"Access-Control-Allow-Origin"头，并设置为允许访问的域名。例如，可以设置为"*"表示允许所有域名访问。

2. 使用代理：在开发环境中，可以配置一个代理来转发请求，绕过浏览器的同源策略。可以使用Vue CLI提供的代理功能或者使用其他代理工具。

3. JSONP：如果服务器不支持设置响应头，可以考虑使用JSONP来进行跨域请求。JSONP利用了<script>标签不受同源策略限制的特性来实现跨域请求。

4. CORS插件：如果你使用的是浏览器插件进行开发调试，可以尝试安装一个CORS插件来绕过同源策略。

Vue No 'Access-Control-Allow-Origin' header is present on the requested resource.

这个问题通常是由于浏览器的同源策略引起的。当你在浏览器上访问一个不同源的资源时（域名、协议、端口都不同），浏览器会阻止跨域请求，以防止潜在的安全风险。

要解决这个问题，可以在服务器端进行一些配置。你可以在服务器的响应头中添加 'Access-Control-Allow-Origin' 字段，值为允许访问的域名或通配符 '*'，表示允许所有域名访问。例如，如果你的前端应用运行在 http://localhost:8080 上，你可以在响应头中添加：

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

如果你希望允许所有域名访问，可以使用通配符：

Access-Control-Allow-Origin: *

另外，你还可以在响应头中添加其他相关的字段，如 'Access-Control-Allow-Methods' 和 'Access-Control-Allow-Headers'，用于指定允许的请求方法和头信息。具体配置需根据你的服务器技术栈来进行。

注意，这只是解决跨域问题的一种方式，具体的实施可能因你的环境而异。如果你使用的是 Vue CLI 开发环境，你可以借助 proxyTable 或者使用 axios 的 baseURL 配置来简化跨域请求。