cross-domain

  // GET
  jsonp = () => {
    let url = "http://xxx";
    fetch(url).then(function (response) {
      return response.json()
    }).then((json) => {
      console.log('parsed json', json);
      document.getElementById("demo").innerHTML = json.result[0].title;
    }).catch(function (ex) {
      console.log('parsing failed', ex)
    })
  };
  jsonp()

  // POST
  jsonp = () => {
    let postData = {
      account: 'xxx',
      password: 'xxx',
      name: 'xx',
      url_back: 'http://xxxxx'
    };
    fetch('http://xxxxx', {
      method: 'POST',
      mode: 'cors',
      credentials: 'include',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      body: JSON.stringify(postData)
    }).then(function (response) {
      console.log(response);
    });
  };
  jsonp()

     function postData(url, data) {
        // Default options are marked with *
        return fetch(url, {
          cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
          /**
           * omit: 默认值，忽略cookie的发送
           * same-origin: 表示cookie只能同域发送，不能跨域发送
           * include: cookie既可以同域发送，也可以跨域发送
           **/
          credentials: 'same-origin', // include, same-origin, *omit
          headers: {
            'user-agent': 'Mozilla/4.0 MDN Example',
            'content-type': 'application/json',
            'Authorization': 'eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJ3ZW5jaGVuZyIsImV4cCI6MTU3MjgyOTc1MCwiaWF0IjoxNTcyMjI0OTUwfQ.ORKZQejDq_E2KvbVF6efHrGJuhk0xRubbmSn0VH4sys-JnavGeKMEWDMKwzYvRO-L8-9SyXwbQn2MCaYZpE5jA'
          },
          method: 'GET', // *GET, POST, PUT, DELETE, etc.
          /**
           * same-origin：该模式是不允许跨域的，它需要遵守同源策略，否则浏览器会返回一个error告知不能跨域；其对应的response type为basic。
           * cors: 该模式支持跨域请求，顾名思义它是以CORS的形式跨域；当然该模式也可以同域请求不需要后端额外的CORS支持；其对应的response type为cors。
           * no-cors: 该模式用于跨域请求但是服务器不带CORS响应头，也就是服务端不支持CORS；这也是fetch的特殊跨域请求方式；其对应的response type为opaque。
           **/
          mode: 'cors', // no-cors, cors, *same-origin
          redirect: 'follow', // manual, *follow, error
          referrer: 'no-referrer', // *client, no-referrer
          // body: JSON.stringify(data), // must match 'Content-Type' header
        }).then(response => response.json()) // parses response to JSON
      }

      postData('http://xxx.com.cn/api/market-data-query/main/mainListMbile?pageNum=1&pageSize=15&search=', {
          answer: 42
        }).then(data => console.log(data)) // JSON from `response.json()` call
        .catch(error => console.error(error))

      let pageNum = 1
      let pageSize = 15
      let search = ''
      let url = `http://xxx.com.cn/api/market-data-query/main/mainListMbile?pageNum=${pageNum}&pageSize=${pageSize}&${search}`

      fetch(url, {
        method: 'GET', // or 'PUT'
        headers: new Headers({
          'Content-Type': 'application/json',
          'Authorization': 'eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJ3ZW5jaGVuZyIsImV4cCI6MTU3MjgyOTc1MCwiaWF0IjoxNTcyMjI0OTUwfQ.ORKZQejDq_E2KvbVF6efHrGJuhk0xRubbmSn0VH4sys-JnavGeKMEWDMKwzYvRO-L8-9SyXwbQn2MCaYZpE5jA'
        })
      }).then(res => res.json()).catch(error => console.error('Error:', error)).then(response => console.log('Success:', response))

检测请求是否成功

      fetch('https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=3908228140,1288170988&fm=58').then(function (response) {
        if (response.ok) {
          return response.blob()
        }
        throw new Error('Network response was not ok.')
      }).then(function (myBlob) {
        var objectURL = URL.createObjectURL(myBlob)
        document.getElementById('myImage').src = objectURL
      }).catch(function (error) {
        console.log('There has been a problem with your fetch operation: ', error.message)
      })

axios

main.js

import axios from 'axios'

Vue.prototype.$axios = axios
axios.defaults.baseURL = '/api'
axios.defaults.headers.post['Content-Type'] = 'application/json'

修改config文件夹下的index.js文件，在proxyTable中加上如下代码：

proxyTable: {
  '/api':{
    target: "https://c.y.qq.com/v8/fcg-bin",
    changeOrigin:true,
    pathRewrite:{
      '^/api':''
    }
  }
},

请求

  methods: {
    _getRecommend () {
      this.$axios.get('/fcg_myqq_toplist.fcg', {
        params: {
          g_tk: 5381,
          uin: 0,
          format: 'json',
          inCharset: 'utf-8',
          outCharset: 'utf-8',
          notice: 0,
          platform: 'h5',
          needNewCode: 1
        },
        headers: {'authorization': this.token}
      }).then((res) => {
        console.log(res.data)
      }).catch((err) => {
        console.log(err)
      })
    }
  },
  mounted () {
    this._getRecommend()
  }

使用 http-proxy-middleware

npm i http-server -g

app.js

let express = require("express");
let proxy = require("http-proxy-middleware");

let app = express();

app.use("/api", proxy({ target: "https://cnodejs.org", changeOrigin: true }));

app.listen(8080);

运行

node app.js

浏览器访问localhost:8080/api 就会获取到 cnodejs官网的数据， 使用相对路劲的api，直接点击也会通过代理跳转拿到数据