大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺
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.net/193645.html原文链接：https://javaforall.net
