vue中怎么解决跨域问题_vue本地访问服务器跨域

全栈程序员站长

发布于 2022-09-29 11:34:43

2.6K0

发布于 2022-09-29 11:34:43

文章被收录于专栏：全栈程序员必看

大家好，又见面了，我是你们的朋友全栈君。

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

跨域的含义

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

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

解决方法

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

CROS

CROS是 Cross-Origin Resource Sharing的缩写，翻译过来就是跨域资源共享的意思。它由一系列传输的HTTP头组成，这些HTTP头会决定浏览器是否阻止前端 JavaScript代码获取跨域请求的响应。

CORS的实现比较简单方便，只需要增加一些 HTTP头，让服务器能声明允许的访问来源。只要后端实现了 CROS就实现了跨域。

Proxy

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

在 vue项目中实现该功能，有以下几种方法：

方法一：如果是通过 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':""
                }
            }
        }
    }
}

方法二：通过服务端实现代理请求转发。以 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

方法三：通过配置 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;
    }
}

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/193645.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022年9月15日，如有侵权请联系 cloudcommunity@tencent.com 删除

vue.js