Error: Network Error

[yyman001]

Summary

use axios will error, use jquery ajax wil success ...,i try set header config

//server.js
// 引入express框架
let express = require('express')
let logger = require('morgan')
let cors = require('cors')
let http = require('http')
let api = require('./data-api')

// 定义一个变量调用express各种方法
let app = express()

function normalizePort (val) {
  const port = parseInt(val, 10)
  if (isNaN(port)) {
    // named pipe
    return val
  }
  if (port >= 0) {
    // port number
    return port
  }
  return false
}

// Get port from environment and store in Express.
const port = normalizePort(process.env.PORT || '3000')
app.set('port', port)
app.use(cors({
  origin: '*',
  methods: ['GET', 'POST']
}))
app.use(logger('dev'))

app.use('/', api)

const server = http.createServer(app)
server.listen(port)

//web
import axios from 'axios'

const $http = axios.create({
  baseURL: 'http://localhost:3000',
  timeout: 1000,
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
    'Access-Control-Allow-Origin': '*'
  }
})
export { $http }

// use
        $http.get('/material/historyList')
          .then((res) => {
            //            console.log(res.data)
            this.history = res.data
          })
          .catch((res) => {
            console.log(res)
          })
// error
Failed to load http://localhost:3000/material/historyList: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.
index.vue?0dbc:799
Error: Network Error
    at createError (createError.js?16d0:16)
    at XMLHttpRequest.handleError (xhr.js?ec6c:87)

Context

• axios version: e.g.: v0.18.0
• Environment: e.g.: node v8.9, chrome 64, windows 10

[Axnyff]

Hello,
did you try to use the developer tools to see what is actually happening at the request level?
Are the CORS headers actually sent with the request?

[JustinBeckwith]

Greetings! It looks like you're trying to ask for an endpoint on localhost:8080, while serving the web page on localhost:3000. When you make a request from one domain to another domain, this is called a Cross Origin Request. This requires a special set of permissions, which led to a deep subject called CORS (Cross Origin Resource Sharing). You can read all about it here:
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

The browser will automatically send a preflight request, which uses an OPTIONS header before making a GET to a different domain. To support this request, your server needs to have CORS explicitly enabled. You can learn how to do that with express here:
https://github.com/expressjs/cors

This can be a little tricky to get going, but hopefully I've given you enough to go read and learn :) I'm going to close this for now, but please do let me know if you run into any troubles as you forge ahead here.

Good luck!