首页 > web前端 > 前端问答 > vue的跨域是什么意思

vue的跨域是什么意思

青灯夜游
发布: 2022-12-21 14:00:01
原创
3153 人浏览过

在vue中,跨域是指浏览器不能执行其他网站的脚本;它是浏览器同源策略造成的,是浏览器对JS实施的安全限制。跨域本质是浏览器基于同源策略的一种安全手段;而同源策略是一种约定,它是浏览器最核心也最基本的安全功能。vue跨域的解决方法:1、JSONP;2、CORS;3、Proxy。

vue的跨域是什么意思

本教程操作环境:windows7系统、vue3版,DELL G3电脑。

1.png

一、跨域是什么

跨域是指浏览器不能执行其他网站的脚本。它是浏览器同源策略造成的,是浏览器对JS实施的安全限制。

跨域本质是浏览器基于同源策略的一种安全手段

同源策略(Sameoriginpolicy),是一种约定,它是浏览器最核心也最基本的安全功能

所谓同源(即指在同一个域)具有以下三个相同点

  • 协议相同(protocol)
  • 主机相同(host)
  • 端口相同(port)

反之非同源请求,也就是协议、端口、主机其中一项不相同的时候,这时候就会产生跨域

一定要注意跨域是浏览器的限制,你用抓包工具抓取接口数据,是可以看到接口已经把数据返回回来了,只是浏览器的限制,你获取不到数据。用postman请求接口能够请求到数据。这些再次印证了跨域是浏览器的限制。

二、如何解决

解决跨域的方法有很多,下面列举了三种:

  • JSONP
  • CORS
  • Proxy

而在vue项目中,我们主要针对CORSProxy这两种方案进行展开

CORS

CORS (Cross-Origin Resource Sharing,跨域资源共享)是一个系统,它由一系列传输的HTTP头组成,这些HTTP头决定浏览器是否阻止前端 JavaScript 代码获取跨域请求的响应

CORS 实现起来非常方便,只需要增加一些 HTTP 头,让服务器能声明允许的访问来源

只要后端实现了 CORS,就实现了跨域

2.png

koa框架举例

添加中间件,直接设置Access-Control-Allow-Origin请求头

1

2

3

4

5

6

7

8

9

10

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();

  }

})

登录后复制

ps: Access-Control-Allow-Origin 设置为*其实意义不大,可以说是形同虚设,实际应用中,上线前我们会将Access-Control-Allow-Origin 值设为我们目标host

Proxy

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

方案一

如果是通过vue-cli脚手架工具搭建项目,我们可以通过webpack为我们起一个本地服务器作为请求的代理对象

通过该服务器转发请求至目标服务器,得到结果再转发给前端,但是最终发布上线时如果web应用和接口服务器不在一起仍会跨域

vue.config.js文件,新增以下代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

amodule.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发送请求中,配置请求的根路径

1

axios.defaults.baseURL = '/api'

登录后复制

方案二

此外,还可通过服务端实现代理请求转发

express框架为例

1

2

3

4

5

6

7

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实现代理

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

server {

    listen    80;

    # server_name xxx.xxx.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;

    }

}

登录后复制

【相关推荐:vuejs视频教程web前端开发

以上是vue的跨域是什么意思的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
vue
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
javascript - Vue 未定义
来自于 1970-01-01 08:00:00
0
0
0
javascript - 如何在vue-router中访问VUE实例?
来自于 1970-01-01 08:00:00
0
0
0
javascript - vue-for-idea
来自于 1970-01-01 08:00:00
0
0
0
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板