vue项目中如何解决跨域问题

最新推荐文章于 2025-03-25 15:20:33 发布

话小说

最新推荐文章于 2025-03-25 15:20:33 发布

阅读量379

点赞数

文章标签： vue.js postman 前端

本文链接：https://blog.youkuaiyun.com/ajdhakj6/article/details/128440896

版权

本文介绍了解决Vue项目中跨域问题的三种方法：利用webpack设置本地服务器代理、通过Express服务端实现代理请求转发以及使用Nginx配置代理。重点介绍了如何在Vue项目中配置代理服务器来解决跨域问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

跨域的含义
跨域的本质就是浏览器基于同源策略的一种安全手段。所谓同源就是必须有以下三个相同点：协议相同、主机相同、端口相同。如果其中有一项不同，即出现非同源请求，就会产生跨域。

跨域实际上是浏览器的限制，开发中使用 postman请求接口能够获得数据就印证了跨域是浏览器的限制这个问题。

解决方法

一般前端中解决跨域问题的方法有 JSONP，CROS，Proxy等，这里我们主要讲解一下在 vue中常用的 Proxy方法。

Proxy
Proxy也称为网络代理，是一种特殊的网络服务，允许一个客户端通过这个服务与另一个网络终端（一般为服务器）进行非直接的连接，一些网关、路由器等网络设备就具有网络代理功能。一般认为代理服务有利于保障网络终端的隐私或安全，防止服务器被攻击。

在 vue项目中实现该功能，有以下几种方法：
1. 方法一：如果是通过 vue-cli脚手架搭建项目，可以通过 webpack设立一个本地服务器作为请求的代理对象，通过该服务器转发请求至目标服务器，得到结果后再转发给前端。但是在最终项目发布上线时，如果 web应用和接口服务器不在一起仍会产生跨域问题。解决方法是，可以在vue.config.js文件中新增以下代码：

module.exprots = {
    devServer: {
        host: '127.0.0.1', // 本地地址
        port: 8084, // 端口号
        open: true, // 配置项目在启动时自动在浏览器打开
        proxy: {
            '/api' : { // '/api'是代理标识，一般是每个接口前的相同部分
                target: "http://xxx.xxx.xx.xx:8080", // 请求地址，一般是服务器地址
                changeOrigin: true, // 是否进行跨域
                pathRewrite: { // pathRewrite的作用是把请求接口中的 '/api'替换掉，一般是替换为空""
                    '^/api':""
                }
            }
        }
    }
}

2.方法二:通过服务端实现代理请求转发。以express框架为例:

var express = require('express');
const proxy = require('http-proxy-middleware')
const app = express()
app.use(express.static(_dirname+'/'))
app.use('/api',proxy({
    traget:'http://localhost:8080',
    changeOrigin: false
}));
module.exprots = app

3.方法三:通过配置nginx实现代理(nginx是一个web服务器，需要到相应的官网进行下载，且进行相应的配置)︰

server {
    listen 80; #监听的端口号
    server_name xxx.xxx.com; #当前服务器的域名
    location / {
        root /var/www/html;
        index index.html index.html;
        try_files $uri $uri/ /index.html;
    }
    location /api { #请求头中带有 '/api'便会进行代理
        proxy_pass htpp://127.0.0.1:3000;
        proxy_redirect off;
        proxy_set_header Host  $host;
        proxy_set_header X-Real-IP  $remote_addr;
        proxy_set_header X-Forwarded-For  $proxy_add_x_forwarded_for;
    }
}