| vue的跨域是什么意思 | 您所在的位置：网站首页 › vue中什么意思 › vue的跨域是什么意思 |
vue的跨域是什么意思
|
在vue跨域是指浏览器无法执行其他网站的脚本；它是由浏览器同源策略引起的，浏览器对JS实施的安全限制。跨域本质是浏览器基于同源策略的安全手段；同源策略是浏览器的核心和基本安全功能。vue跨域解决方案：1.JSONP；2、CORS；3、Proxy。
本教程的操作环境：windows7系统、vue3版，DELL G3电脑。
跨域是指浏览器无法执行其他网站的脚本。它是由浏览器同源策略引起的，浏览器对浏览器JS安全限制的实施。 跨域的本质是基于浏览器同源策略一种安全手段 同源策略（Sameoriginpolicy），它是浏览器的核心和基本安全功能 所谓同源(即同一个域)具有以下三个相同点 协议相同（protocol）主机相同（host）端口相同（port）相反，当协议、端口和主机不同时，就会出现跨域请求 一定要注意跨域是浏览器的限制。如果您使用包工具捕获接口数据，您可以看到接口已经返回数据，但浏览器的限制，您无法获得数据。postman请求界面可以要求数据。这再次证实了跨域是浏览器的限制。 二、如何解决解决跨域问题的方法有很多，下面列出了三种: JSONPCORSProxy而在vue我们主要针对项目CORS或Proxy展开这两种方案 CORSCORS （Cross-Origin Resource Sharing，跨域资源共享)是由一系列传输的系统HTTP头部组成，这些HTTP决定浏览器是否阻止前端 JavaScript 代码获取跨域请求的响应 CORS 实现起来很方便，只需要加一些 HTTP 头服务器声明允许的访问源 只要后端实现 CORS，跨域实现
以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(); } })登录后复制ps: Access-Control-Allow-Origin 设置为*其实意义不大，可以说是形同虚设。在实际应用中，我们将在上线前Access-Control-Allow-Origin 值设定为我们的目标host Proxy代理（Proxy）又称网络代理，是一种特殊的网络服务，允许一个（通常是客户端）通过该服务与另一个网络终端（通常是服务器）非直接连接。一些网关、路由器等网络设备具有网络代理功能。一般认为，代理服务有利于确保网络终端的隐私或安全，防止攻击 方案一 如果是通过vue-cli我们可以通过脚手架工具建设项目webpack为我们提供本地服务器作为请求的代理对象 将服务器转发到目标服务器，然后将结果转发到前端，但如果最终发布在线，web应用应用程序和接口服务器不在一起，仍然会跨域 在vue.config.js文件，添加以下代码 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在发送请求中，配置请求的根路径 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 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中文网其他相关文章！ |
【本文地址】
| 今日新闻 |
| 推荐新闻 |
| 专题文章 |