前端vue 代理 或 后端node解决 跨域问题

vue/cli2

#config/index.js
proxyTable: {
            '/api': {
                target: 'http://localhost:3000', // 你要代理的域名和端口号，要加上http
                changeOrigin: true, // 跨域
                pathRewrite: {
                    '^/api': '' // 给代理的地址起个别名的意思   
                    //如果axios不封装baseURL 的话
                    //'^/api': ''    --->调用接口时 axios.get('/api/menu') <==等价于==> axios.get('http://localhost:3000/menu') 
                    //'^/api': 'asd' --->调用接口时 axios.get('/api/menu') <==> axios.get('http://localhost:3000/asd/menu')
                }
            }
        },

如果对axios分装 就这样写 baseURL

#axios.js
#封装
const http = axios.create({
    baseURL: '/api',
    withCredentials: true,
    timeout: 50000
})
#调用
http ({ url: '/menu' })

node

方法一： 通过中间件解决

app.use(function (req, res, next) {
// 设置cors跨域
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By", ' 3.2.1')
res.header("Content-Type", "application/json;charset=utf-8");
next();
})

方法二： 通过第三方模块解决

安装

npm install cors

引入使用

var cors =  require('cors')
app.use(sors())