vue2 axios跨域解决方法和nodejs+express跨域

ゝ一世哀愁。 2023-10-09 14:07 116阅读 0赞

## 方法一 ##

1.在vue.config.js文件中配置

module.exports = {
      devServer: {
        proxy: {
          '/api': {                      //这里就是如果遇到自己要访问的路径里面有'/api'字                            
                                         //样就自动转化为下面target加在‘/api’去前面
            target: 'http://127.0.0.1:7001', //这里写要访问的网址和端口
            // pathRewrite:{'^/atguigu':''},
            // ws: true, //用于支持websocket
            // changeOrigin: true //用于控制请求头中的host值
          },
        }
      }
    }

这里有两个坑target: 'http://127.0.0.1:7001', 这个地址是要请求的
    如果想跨域的话就自己请求自己的地址
    axios.post('http://localhost:8080/api/admin/login', {
              'username': '19568269510',
              'password': '123456'
            })
    大坑 如果请求自己的地址的话一定要看一下 自己的当前的地址是localhost 还是127.0.0.1
    如果localhost 和127.0.0.1这个没看清楚写好会跨域失败的大坑大坑

3.端口配置

app.get('/api/data', (req, res) => {   //后端的端口路径前面加上api
        res.send({
            mas: '请求成功'
        })
    })

## 方法二 直接复制在服务器文件 ##

var express=require("express");  //有了就不用复制这条
    var app=express();               //有了就不用复制这条
    app.use(function(req,res,next){
        res.header('Access-Control-Allow-Origin', '*');
    
        res.header('Access-Control-Allow-Headers', 'Content-Type,Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
    
        res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE,OPTIONS');
        // 千万不要网%%￥￥￥###
        // 千万不要网
        // 千万不要网
        next();
    })