Access to XMLHttpRequest at 'http://localhost:8080/api/user/login' from origin '

230 阅读1分钟

跨域问题

原因

 浏览器同源策略  &&  请求是ajax类型
    

image.png

解决方案 ==> 这这里的方法是代理转发

  • 前端用JSONP方式去发请求(jsonp不是ajax请求)
  • 后端写代码(CORS)在响应中添加必要的响应头,让响应回来之后浏览器不报错
  • 代理转发

image.png 代码

module.exports = {
  devServer: {
    // ... 省略
    // 代理配置
    proxy: {
        // 如果请求地址以/api打头,就出触发代理机制
        // http://localhost:9588/api/login -> http://localhost:3000/api/login
        '/api': {
          target: 'http://localhost:3000' // 我们要代理的真实接口地址
        }
      }
    }
  }
}

实现原理

image.png