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

2019年8月24日 160次阅读 来源: Maldivee

什么是跨域？

同源战略划定了如果两个 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跨域题目小结》

迎接更多补充，交换

    原文作者：Maldivee
    原文地址: https://segmentfault.com/a/1190000013223031
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞