Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

Today we will learn about the two solutions to the problems of Vue project front-end and back-end interaction, requesting data across domains and so on.

Real machine test:

Config /index.js dev:{host:'0.0.0.0'} CNPM I axios --saveCopy the code

Cross domain

< first > Cors mode is cross-domain

By setting the access-Control-allow-origin header to ‘*’, each request is allowed to Access.

res.setHeader('Access-Control-Allow-Origin'.The '*')
Copy the code
const dogModel = require('.. /model/dogModel')
const url = require('url')
const getDogs = (req, res) = > {
  res.setHeader('Access-Control-Allow-Origin'.The '*')
  dogModel.showCats((data) = > {
    res.json(data)
  })
}

module.exports = {
  getDogs,
}
Copy the code

Page request data

The backend request data, commonly used in the work is the AXIos request library, has been packaged, we can use a little modification. Use more!

<template>
  <div class="hello">
    <input type="text" v-model="dogname" @keyup.enter="add" />
    <button @click="find">To find the</button>
    <ul>
      <li v-for="dog in dogs" :key="dog.id">
        {{ dog.name }} {{ dog.age }} <button @click="del(dog.id)">delete</button>
      </li>
    </ul>
  </div>
</template>
Copy the code
<script>
import axios from 'axios'
export default {
  name: 'testApiWithCores'.data() {
    return {
      dogs: [].dogname: ' ',}},created() {
    this.getData()
  },
  methods: {
    getData() {
      axios.get('http://localhost:3000/dogs').then((res) = > {
        this.dogs = res.data
      })
    },
    find() {
      axios
        .get('http://localhost:3000/dogs', {
          params: {
            name_like: this.dogname,
          },
        })
        .then((res) = > {
          this.dogs = res.data
        })
    },
    add() {
      axios
        .post(
          'http://localhost:3000/dogs',
          {
            name: this.dogname,
            age: 1}, {headers: {
              'Content-Type': 'application/json',
            },
          }
        )
        .then(() = > {
          this.getData()
        })
      this.dogname = ' '}, }, } </script> <! -- Add"scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
Copy the code

2 < second > HTTP-proxy-middleware proxy

Our projects typically use scaffolding initialization, which is handled using the HTTP-proxy-middleware proxy

  1. For example, the request url: “http://localhost:3000/dogs”

    (axiOS CNPM I axios –save)

  2. Open config/index.js and add the following code to the proxyTable:

// Format: cross domain in proxy mode
"String": {target:"Target".changeorigin:true.pathRewrite:""
}
Copy the code
proxyTable: {
    '/api': { // Start with '/ API 'instead of 'http://localhost:9000',
        target: 'http://localhost:9000'.// Source address Sets the domain name or port number of the interface you call
        changeorigin: true.// Change the source across domains
        pathRewrite: {
            '^/api': ' ' // replace the target address with '/ API '}}}Copy the code

When writing a request function in a project, directly

axios.get('/api/dogs').then((res) = > {
  this.dogs = res.data
})
Copy the code