vue项目如何解决跨域问题
跨域是什么
跨域本质是浏览器基于同源策略的一种安全手段
同源策略(Sameoriginpolicy),是一种约定,它是浏览器最核心也最基本的安全功能
所谓同源(即指在同一个域)具有以下三个相同点
● 协议相同(protocol)
● 主机相同(host)
● 端口相同(port)
反之非同源请求,也就是协议、端口、主机其中一项不相同的时候,这时候就会产生跨域
一定要注意跨域是浏览器的限制,你用抓包工具抓取接口数据,是可以看到接口已经把数据返回回来了,只是浏览器的限制,你获取不到数据。用postman请求接口能够请求到数据。这些再次印证了跨域是浏览器的限制。
如何解决
解决跨域的方法有很多,下面列举了三种:
● JSONP
● CORS
● Proxy
而在vue项目中,我们主要针对CORS或Proxy这两种方案进行展开
1、CORS处理方式(推荐)
CORS (Cross-Origin Resource Sharing,跨域资源共享)是一个系统,它由一系列传输的HTTP头组成,这些HTTP头决定浏览器是否阻止前端 JavaScript 代码获取跨域请求的响应。CORS 实现起来非常方便,只需要增加一些 HTTP 头,让服务器能声明允许的访问来源,只要后端实现了 CORS,就实现了跨域。
Java、PHP这些后端语言,都有一定的方法可以修改HTTP响应头中的 Access-Control-Allow-Origin
复制代码
我们这里以koa框架举例
添加中间件,直接设置Access-Control-Allow-Origin响应头
app.use(async (ctx, next)=> {
ctx.set('Access-Control-Allow-Origin', '*');
ctx.set('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
ctx.set('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
if (ctx.method == 'OPTIONS') {
ctx.body = 200;
} else {
await next();
}
})
注意:Access-Control-Allow-Origin 设置为*其实意义不大,可以说是形同虚设,实际应用中,上线前我们会将Access-Control-Allow-Origin 值设为我们目标host
2、Proxy处理方式
代理(Proxy)也称网络代理,是一种特殊的网络服务,允许一个(一般为客户端)通过这个服务与另一个网络终端(一般为服务器)进行非直接的连接。一些网关、路由器等网络设备具备网络代理功能。一般认为代理服务有利于保障网络终端的隐私或安全,防止攻击
方案一
注意本地代理打包后会失效,项目上线时依旧需要服务端处理代理问题
复制代码
如果是通过vue-cli脚手架工具搭建项目,我们可以通过webpack为我们起一个本地服务器作为请求的代理对象
通过该服务器转发请求至目标服务器,得到结果再转发给前端,但是最终发布上线时如果web应用和接口服务器不在一起仍会跨域
在vue.config.js文件,新增以下代码
module.exports = {
devServer: {
host: '127.0.0.1',
port: 8084,
open: true,// vue项目启动时自动打开浏览器
proxy: {
'/api': { // '/api'是代理标识,用于告诉node,url前面是/api的就是使用代理的
target: "http://xxx.xxx.xx.xx:8080", //目标地址,一般是指后台服务器地址
changeOrigin: true, //是否跨域
pathRewrite: { // pathRewrite 的作用是把实际Request Url中的'/api'用""代替
'^/api': ""
}
}
}
}
}
通过axios发送请求中,配置请求的根路径
axios.defaults.baseURL = '/api'
方案二
此外,还可通过服务端实现代理请求转发
以express框架为例
var express = require('express');
const proxy = require('http-proxy-middleware')
const app = express()
app.use(express.static(__dirname + '/'))
app.use('/api', proxy({ target: 'http://localhost:4000', changeOrigin: false
}));
module.exports = app
方案三
通过配置nginx实现代理
server {
listen 80;
# server_name www.josephxia.com;
location / {
root /var/www/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
location /api {
proxy_pass http://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;
}
}
vue项目如何解决跨域问题的更多相关文章
- vue项目中解决跨域问题axios和
项目如果是用脚手架搭建的(vue cli)项目配置文件里有个proxyTable proxyTable是vue-cli搭建webpack脚手架中的一个微型代理服务器,配置如下 配置和安装axios 安 ...
- vue webpack配置解决跨域问题
现在基本项目都是实行前后端分离的原则,不管是ng 或者是vue 在开发中都无法避免跨域的这个问题 本人刚上手第一个vue项目,在调用api的时候出现了跨域的这个问题 这是封装好一个简单的post 请求 ...
- vue+nodejs+express解决跨域问题
nodejs+express解决跨域问题,发现网上的大部分都是误导人,花了不少时间,终于弄懂了, 我在vue+nodejs+express+mongodb的项目里面,发现本地用vue代理正常调用远程的 ...
- 使用 Nginx 部署前后端分离项目,解决跨域问题
前后端分离这个问题其实松哥和大家聊过很多了,上周松哥把自己的两个开源项目部署在服务器上以帮助大家可以快速在线预览(喜大普奔,两个开源的 Spring Boot + Vue 前后端分离项目可以在线体验了 ...
- 关于vue项目中axios跨域的解决方法(开发环境)
1.在config文件中修改index.js proxyTable: { "/api":{ target: 'https://www.baidu.com/muc/',//你需要跨域 ...
- Vue项目多域名跨域
在Vue项目中请求后台数据时,遇到的多域名跨域问题. 直接上代码: assetsSubDirectory: "static", assetsPublicPath: "/& ...
- vue 使用 proxyTable 解决跨域问题
1.在 main.js 中,在引入 axios: import axios from 'axios' Vue.config.productionTip = false Vue.prototype.$a ...
- vue反向代理解决跨域
问题描述 在项目开发的时候,接口联调的时候一般都是同域名下,且不存在跨域的情况下进行接口联调,但是当我们现在使用vue-cli进行项目打包的时候,我们在本地启动服务器后,比如本地开发服务下是 http ...
- vue项目中的跨域源请求拦截问题CORS头缺少'Access-Control-Allow-Origin'
这里使用的是axios发请求出现的. 访问的api接口是: 在不同域之间访问是比较常见,在本地调试访问远程服务器....这就是有域问题. VUE解决通过proxyTable 解决办法: 1.检查请求方 ...
- vue.js vue-jsonp解决跨域问题
安装jsonp npm install vue-jsonp --save main.js中引入 import VueJsonp from 'vue-jsonp' Vue.use(VueJsonp) 组 ...
随机推荐
- Redis集群(主从复制)
主从复制主从复制原理 Redis集群中有很多Redis服务器,这些Reids服务器分为主服务器和从服务器. 从服务器会向主服务器发送命令:SYNC命令. 主服务器接收到SYNC命令后,开始执行GBSA ...
- <鸳鸯刀>&<白马啸西风>随笔
这两部作品比较小众,也不如之前的作品优秀,因此简单写一下好了. <鸳鸯刀> 陕西西安府威信镖局的总镖头."铁鞭镇八方"周威信,带领一支七十多人的镖队正前往京城.路途之上 ...
- C语言博客作业07
1.作业头 这个作业属于哪个课程 https://edu.cnblogs.com/campus/zswxy/SE2020-3 这个作业要求在哪里 https://edu.cnblogs.com/cam ...
- html 手机端适配不同手机高度 ,把内容居中显示
手机端适配不同手机高度 ,把内容居中显示,可以将div.img.section.span.p等等元素,设置 top:50%; margin-top:xxvw; 这样可以保证主题内容居中显示.
- 为什么javac后加.java,java后不加.class?
Javac和java命令的用法:javac需要文件,Java需要执行类或jar文件javac用法: java用法 例子 Java命令后的"test.Test.class"会被认为是 ...
- Jmeter六、采样器解析
一.HTTP request sampler 默认端口:80 协议protocol:http,https,file 参数中有特殊字符,勾选编码encode send files with reques ...
- 中国台湾BSMI认证变动
China Taiwan 中国台湾 2022 年 11 月 1 日,BSMI和经济部发布了针对 18 种音像产品的修订法定检验要求. 自发布之日起,CNS 15598-1:2020 Audio/vid ...
- Markdown基础使用学习
Mark Down学习 标题:#+标题名字 二级标题:## +标题名字 三级... 字体 两个*+字+两个=加粗 一个=斜体 引用 一个大于号+内容 图片 ![图片名字](路径) 符号全部小写 超链接 ...
- torch直接更改参数
使用model.layer1.weight.data.copy_(w1) 其中model是自定义的参数名字,layer1是某个具体的层,使用某个具体的w1来修改
- 如何服务好B端客户
核心价值: 2B公司的核心价值在于服务.如何服务好客户,需要的是了解客户,与客户共赢. 一.客户信任度的建立 服务:不是口头说说,是要落地与实践. 对于客户的承诺至关重要,承诺的时间点.承诺的事情要保 ...