zoukankan      html  css  js  c++  java
  • Vue处理跨域

    Vue处理ajax跨域

    一般处理跨域有好几种方式,jsonp,document.domain, post Message...,今天我们主要来谈谈vue 通过代理方式来实现跨域

    安装

     npm install http-proxy-middleware --save
    
     npm install express --save
    

    代理配置

    下面主要通过花瓣网的搜索接口为例:

    • vue1.0版本

      • 设置build/dev-server.js

        	var proxyMiddleware = require('http-proxy-middleware')
        	const express = require('express')
        	var server = express()
        	
        	server.middleware = [
        	      proxyMiddleware(['search/hint'], {target: 'http://huaban.com/', changeOrigin: true}) // 若有多个主域相同,不同路径下的接口,可以创建多个proxyMiddleware
        	];
        	
        	server.use(server.middleware);
        
        • 设置config/index.js 中代理: proxyTable

            proxyTable: {
              '/api': {
                target: 'http://huaban.com', // 远程接口前缀
                changeOrigin: true,
                pathRewrite: {
                  '^/api': ''
                }
              }
          
    • vue2.0实现

      由于vue2.0文件目录发生变化,build/dev-server.js 文件已不存在,主要修改变换到build/webpack.dev.conf.js
      其他配置和vue1.0保持一致

    接口调用:

    通过调用花瓣网搜索的接口

    	this.$http.get('api/search/hint/?q=e&limit=6').then((response) => {
    	    					console.log(response.data.result)
    					});
    
    	获取到的数据:
    	(6) ["二次元", "儿童", "儿童房", "儿童画", "儿童摄影", "二维码"]
    

    相关http-proxy-middleware用法参考
    https://github.com/chimurai/http-proxy-middleware

  • 相关阅读:
    一个简单的空间配置器
    【转】c++中placement new操作符
    类的operator new与operator delete的重载【转】
    STL中常用的c++语法
    java编程思想-多态
    java编程思想-复用类(2)
    java编程思想-复用类
    import与require的区别
    gulp插件
    gulp-gulpfile.js语法说明
  • 原文地址:https://www.cnblogs.com/goddess/p/8358471.html
Copyright © 2011-2022 走看看