详解vue-cli项目中的proxyTable跨域问题小结


Posted in Javascript onFebruary 09, 2018

什么是跨域?

同源策略规定了如果两个 url 的协议、域名、端口中有任何一个不等,就认定它们跨源了。

跨域的解决方式有哪几种?

1.JSONP 是 JSON with padding(填充式 JSON 或参数式 JSON)的简写。

JSONP实现跨域请求的原理简单的说,就是动态创建<script>标签,然后利用<script>的src 不受同源策略约束来跨域获取数据。

JSONP 由两部分组成:回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的 JSON 数据。
动态创建<script>标签,设置其src,回调函数在src中设置:

var script = document.createElement("script");
script.src = "https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleResponse";
document.body.insertBefore(script, document.body.firstChild);

在页面中,返回的JSON作为参数传入回调函数中,我们通过回调函数来来操作数据。

function handleResponse(response){
  // 对response数据进行操作代码
  console.log(response)
}

JSONP目前还是比较流行的跨域方式,虽然JSONP使用起来方便,但是也存在一些问题:

首先, JSONP 是从其他域中加载代码执行。如果其他域不安全,很可能会在响应中夹带一些恶意代码,而此时除了完全放弃 JSONP 调用之外,没有办法追究。因此在使用不是你自己运维的 Web 服务时,一定得保证它安全可靠。

JSONP 具有直接访问响应文本的优点,但是要想确认 JSONP 是否请求失败并不容易,因为 script 标签的 onerror 事件还未得到浏览器广泛的支持,此外它仅能支持 GET 方式调用。

2.cros跨域

整个CORS通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。

因此,实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信。

一个常用的完整的跨域头:

let express=require("express");
let app=express();
app.use(function(req,res,next){
 //如果在webpack里配置了代理,那么这些响应头都不要了
 //只允许8080访问
  res.header('Access-Control-Allow-Origin','http://localhost:8080');

 //服务允许客户端发的方法
 res.header('Access-Control-Allow-Methods','GET,POST,DELETE,PUT');
 //服务器允许的请求头
 res.header('Access-Control-Allow-Headers','Content-Type,Accept');
 //跨域携带cookie 允许客户端把cookie发过来
 res.header('Access-Control-Allow-Credentials','true');
 //如果请求的方法是OPTIONS,那么意味着客户端只要响应头,直接结束响应即可
 if(req.method == 'OPTIONS'){
  res.end();
 }else{
  next();
 }
});
app.listen(3000);

3.hash + iframe

4.postMessage

5.WebSockets

后台只给我接口,不能修改后台,怎么跨域?

详解vue-cli项目中的proxyTable跨域问题小结

在实际工作中,前后端配合并不是那么默契,如果后台只给我接口,不能修改后台,怎么跨域?
在vue项目和react项目中的config文件中,都有一个proxy代理设置,这个就是用来在开发环境下进行跨域的。对其进行设置就能实现跨域。

通过vue-cli脚手架搭建出来的项目,修改config文件夹下的index.js中的proxyTable就能实现:

详解vue-cli项目中的proxyTable跨域问题小结

module.exports = {
 dev: {
  env: {
   NODE_ENV: '"development"'
  },
  //proxy

  // 只能在开发环境中进行跨域,上线了要进行反向代理nginx设置
   proxyTable: {
    //这里理解成用‘/api'代替target里面的地址,后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add',直接写‘/api/user/add'即可
   '/api': {
     target: 'http://news.baidu.com',//你要跨域的网址 比如 'http://news.baidu.com',
    secure: true, // 如果是https接口,需要配置这个参数
    changeOrigin: true,//这个参数是用来回避跨站问题的,配置完之后发请求时会自动修改http header里面的host,但是不会修改别的
    pathRewrite: {
     '^/api': '/api'//路径的替换规则
     //这里的配置是正则表达式,以/api开头的将会被用用‘/api'替换掉,假如后台文档的接口是 /api/list/xxx
     //前端api接口写:axios.get('/api/list/xxx') , 被处理之后实际访问的是:http://news.baidu.com/api/list/xxx
    }
   }
  },

让我们用本地起的服务来测试一下如何跨域 demo

0.用vue-cli搭建的脚手架,npm run dev 前端端口号一般是:http://localhost:8080

1.修改config文件中的index.js proxyTable:{}这段代码,替换掉即可:

module.exports = {
 dev: { 
   proxyTable: {
   '/api': {
     target: 'http://localhost:8000',
    secure: true,  
    changeOrigin: true,
    pathRewrite: {
     '^/api': '/api'
    }
   }
  },

2.自己写一个后台,使用express+node.js ,不设置任何跨域头,代码如下:

注意自己需要在当前文件夹下提前准备一个list.json的文件,用来读取数据,返回数据。fs.readFile('./list.json','utf8',cb)

详解vue-cli项目中的proxyTable跨域问题小结

let express = require('express');
let app = express();
let fs = require('fs');
let list = require('./list');
let bodyParser = require('body-parser');
app.use(bodyParser.json());
app.use(express.static(__dirname));

//read
function read(cb) { //用来读取数据的,注意自己在mock文件夹下准备一些数据
 fs.readFile('./list.json','utf8',function (err,data) {
  if(err || data.length === 0){
   cb([]); // 如果有错误 或者文件没长度 就是空数组
  }else{
   cb(JSON.parse(data)); // 将读出来的内容转化成对象
  }
 })
}
//write
function write(data,cb) { // 写入内容
 fs.writeFile('./list.json',JSON.stringify(data),cb)
}
// 注意 没有设置跨域头
app.get('/api/list',function (req,res) {
 res.json(list);
});
app.listen(8000,()=>{
 console.log('8000 is ok');
});

3.前端调取的api代码:

import axios from 'axios';
 axios.interceptors.response.use((res)=>{
 return res.data; // 在这里统一拦截结果 把结果处理成res.data
});
export function getLists() {
  return axios.get('/api/list');
}

4.在组件中进行跨域调取接口,打印数据

随便在一个文件中引入api测试一下 打印出来接口返回的数据

import {getLists} from '../../api/index'
 export default {
  async created(){
   let dataList=await getLists();
   console.log(dataList,"我请求的数据");
  },

5.查看控制台,打印出数据,没有保错,代表跨域成功,代理服务成功

详解vue-cli项目中的proxyTable跨域问题小结

详解vue-cli项目中的proxyTable跨域问题小结

开发环境成功跨域了,上线怎么办?

上线要进行nginx反向代理设置,同时应区分环境变量,具体设置请看图片:

详解vue-cli项目中的proxyTable跨域问题小结

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js Dialog 实践分享
Oct 22 Javascript
js对象内部访问this修饰的成员函数示例
Apr 27 Javascript
javascript函数命名的三种方式及区别介绍
Mar 22 Javascript
JavaScript作用域示例详解
Jul 07 Javascript
jquery对Json的各种遍历方法总结(必看篇)
Sep 29 Javascript
js点击任意区域弹出层消失实现代码
Dec 27 Javascript
使用vue-infinite-scroll实现无限滚动效果
Jun 22 Javascript
vue基于element-ui的三级CheckBox复选框功能的实现代码
Oct 15 Javascript
详解如何提升JSON.stringify()的性能
Jun 12 Javascript
vue-cli和v-charts实现可视化图表过程解析
Oct 08 Javascript
VueJS实现用户管理系统
May 29 Javascript
JS 5种遍历对象的方式
Jun 16 Javascript
使用express搭建一个简单的查询服务器的方法
Feb 09 #Javascript
js自定义trim函数实现删除两端空格功能
Feb 09 #Javascript
JavaScript运行原理分析
Feb 09 #Javascript
vue 全选与反选的实现方法(无Bug 新手看过来)
Feb 09 #Javascript
详解如何在项目中使用jest测试react native组件
Feb 09 #Javascript
vue checkbox 全选 数据的绑定及获取和计算方法
Feb 09 #Javascript
mint-ui 时间插件使用及获取选择值的方法
Feb 09 #Javascript
You might like
模仿OSO的论坛(三)
2006/10/09 PHP
PHP中SESSION使用中的一点经验总结
2012/03/30 PHP
PHP文件生成的图片无法使用CDN缓存的解决方法
2015/06/20 PHP
PHP Laravel 上传图片、文件等类封装
2017/08/16 PHP
Thinkphp3.2简单解决多文件上传只上传一张的问题
2017/09/26 PHP
JQuery 学习笔记01 JQuery初接触
2010/05/06 Javascript
JavaScript将一个数组插入到另一个数组的方法
2015/03/19 Javascript
javascript对象的相关操作小结
2016/05/16 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
2016/05/18 Javascript
php输出全部gb2312编码内的汉字方法
2017/03/04 Javascript
详解利用jsx写vue组件的方法示例
2017/07/17 Javascript
基于JavaScript实现带数据验证和复选框的表单提交
2017/08/23 Javascript
基于js 各种排序方法和sort方法的区别(详解)
2018/01/03 Javascript
详解element-ui中form验证杂记
2019/03/04 Javascript
JavaScript从原型到原型链深入理解
2019/06/03 Javascript
微信小程序实现折线图的示例代码
2019/06/07 Javascript
python使用webbrowser浏览指定url的方法
2015/04/04 Python
Python cookbook(数据结构与算法)将序列分解为单独变量的方法
2018/02/13 Python
python3+pyqt5+itchat微信定时发送消息的方法
2019/02/20 Python
python接口自动化(十七)--Json 数据处理---一次爬坑记(详解)
2019/04/18 Python
Python OpenCV中的resize()函数的使用
2019/06/20 Python
对Django中static(静态)文件详解以及{% static %}标签的使用方法
2019/07/28 Python
Python 爬取必应壁纸的实例讲解
2020/02/24 Python
TensorFlow实现模型断点训练,checkpoint模型载入方式
2020/05/26 Python
使用Keras中的ImageDataGenerator进行批次读图方式
2020/06/17 Python
anaconda安装pytorch1.7.1和torchvision0.8.2的方法(亲测可用)
2021/02/01 Python
css3实现元素环绕中心点布局的方法示例
2019/01/15 HTML / CSS
美国最大的旗帜经销商:Carrot-Top
2018/02/26 全球购物
.NET程序员的几道面试题
2012/06/01 面试题
通用C#笔试题附答案
2016/11/26 面试题
创建学习型党组织实施方案
2014/03/29 职场文书
2014年秋季开学寄语
2014/08/02 职场文书
2014年化验室工作总结
2014/11/21 职场文书
Python爬虫之爬取二手房信息
2021/04/27 Python
JavaScript ES6的函数拓展
2022/01/18 Javascript
Python可变与不可变数据和深拷贝与浅拷贝
2022/04/06 Python