【vue】--代理方式跨域

正向代理与反向代理

前端使用代理主要用于跨域请求,

关于跨域:常用的方式

  • JSONP:利用script标签可跨域的特点,在跨域脚本中可以直接回调当前脚本的函数。
  • CORS:服务器设置HTTP响应头中Access-Control-Allow-Origin值,解除跨域限制

但是这两个跨域方案都存在一个致命的缺陷,严重依赖后端的协助,

代理 就可以作为 前端独立解决跨域的方案

正向代理

是指一个位于客户端和目标服务器(target server)之间的服务器,为了从目标服务器取得内容,客户端向代理发送一个请求并指定目标(目标服务器),然后代理向目标服务器转交请求并将获得的内容返回给客户端。

  vue-cli 3.x  新建vue.config.js文件

module.exports = {
    devServer: {
        proxy: {
            // proxy all requests starting with /api to jsonplaceholder
            ‘/api‘: {
                target: ‘http://localhost:8080‘,   //代理接口
                changeOrigin: true,
                pathRewrite: {
                    ‘^/api‘: ‘/mock‘    //代理的路径
                }
            }
        }
    }
}

反向代理

反向代理(Reverse Proxy)是指以代理服务器来接受internet上的连接请求,然后将请求转发给内部网络上的服务器,并将从服务器上得到的结果返回给internet上请求连接的客户端,此时代理服务器对外就表现为一个反向代理服务器。

https://www.cnblogs.com/softidea/p/7425894.html

原文地址:https://www.cnblogs.com/zjt-blogs/p/11607046.html

时间: 2024-10-11 14:12:18

【vue】--代理方式跨域的相关文章

jquery Ajax 通过jsonp的方式跨域提交表单

Jquery Ajax可以通过jsonp的方式跨域提交表单,至于什么是跨域提交简单说就是你的客户端和服务端不在同一个域名下或端口号不同也可以叫做跨域. 前台代码: $.ajax({ type : 'get', async: false, url : '${pageContext.request.contextPath}/clue/uploadForm', dataType : 'jsonp', data: { mydata : JSON.stringify(obj,fm), formId : f

jquery、javascript实现(get、post两种方式)跨域解决方法

一.实现get方式跨域请求数据 浏览器端 <script> $(document).ready(function(){ $.ajax({ url: "http://www.xxx.cn/index.php", type: "get", dataType: "jsonp", //指定服务器返回的数据类型 success: function (data) { console.log(data); } }); }); </script

【nginx学习】nginx反向代理前端跨域问题

* 跨域简介: 跨域是指a页面想获取b页面资源,如果a.b页面的协议.域名.端口.子域名不同,所进行的访问行动都是跨域的,而浏览器为了安全问题一般都限制了跨域访问,也就是不允许跨域请求资源. 注意:跨域限制访问,其实是浏览器的限制. 跨域类型: URL 说明 是否跨域 http://www.cnblogs.com/a.js http://www.a.com/b.js 不同域名 是 http://www.a.com/lab/a.js http://www.a.com/script/b.js 同一域

使用图片跨域方式获取图片数据 使用 jsonp 方式跨域获取数据

使用图片跨域方式获取图片数据 server.get(`/mockImg`, (req, res, next) => { // 使用图片跨域方式获取图片数据 req.headers.origin && res.setHeader(`Access-Control-Allow-Origin`, req.headers.origin) res.setHeader(`content-type`, `image/gif`) res.setHeader(`data`, `image/gif`) v

vue cli 解决跨域 线上 nginx 反向代理配置

前后分离 axios 接 api 跨域问题如图: 解决办法: 1. npm start 本地开发环境解决: 在webpack配置文件 /config/index.js 里找到 proxyTable 开启代理 changeOrigin:true, proxyTable: { '/api':{ target:'http://xx.xx.xx.xx:5568', changeOrigin:true, pathRewrite:{ '^/api':'/api' } } }, 2. npm run buil

vue 解决axios 跨域问题

闲着没事,假期敲vue 请求数据,总结下vue跨越问题 第一种.服务器服务器不支持跨域请求   1.当跨域无法请求的时候我们可以修改工程下config文件夹下的index.js中的dev:{}部分. 添加下面的代码: proxyTable: { '/api': { target: 'http://api.douban.com/v2', changeOrigin: true, pathRewrite: { '^/api': '' } } }, 将target设置为我们需要访问的域名. 2.然后在m

一篇搞定vue请求和跨域

vue本身不支持发送AJAX请求,需要使用vue-resource.axios等插件实现 axios是一个基本Promise的HTTP请求客户端,用来发送请求,也是vue2.0官方推荐的,同时不再对vue-resource进行更新和维护 axios发送AJAX请求 安装axios npm install axios -S 基本用法 axios([options]) axios.get(url[,options])  传参方式:1.通过url 传参   2.通过params选项传参 axios.p

vue proxyTable 接口跨域请求调试(五)

在不同域之间访问是比较常见,在本地调试访问远程服务器....这就是有域问题. VUE解决通过proxyTable: 在 config/index.js 配置文件中 dev: { env: require('./dev.env'), port: 8080, autoOpenBrowser: true, assetsSubDirectory: 'static', assetsPublicPath: '/', //proxyTable: {}, proxyTable: proxyConfig.prox

vue中解决跨域问题

方法1.后台更改header header('Access-Control-Allow-Origin:*');//允许所有来源访问 header('Access-Control-Allow-Method:POST,GET');//允许访问的方式 方法2.使用JQuery提供的jsonp methods: { getData () { var self = this $.ajax({ url: 'http://f.apiplus.cn/bj11x5.json', type: 'GET', data