解决前端跨域问题（代理服务器）

1.为什么会出现跨域问题？

简单说就是：浏览器的地址与请求服务器的地址不同

例如左边浏览器的端口号是8080  右边服务器的端口号是5000

 2.解决跨域问题的方法

a.cors 后端设置（缺点：容易让陌生人也访问）

b.jsonp 利用了scrip标签src属性不受跨域影响的原理（缺点：只能进行get请求）

c.前端设置代理器（最常用）

3.代理服务器的原理

代理服务器的请求地址：必须与浏览器的请求地址相同，使用浏览器与代理器的服务器就不会存在跨域问题。

服务器与服务器之间是不会存在跨域问题，所以代理服务器与服务器之间不会存在跨域问题的

3.前端开启代理服务器的方法

a.nginx(需要后端知识，学习成本比较高)

b.vue-cli(简单实用) 

4.vue-cli开启代理服务器

a.方式一：

如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。

devServer.proxy 可以是一个指向开发环境 API 服务器的字符串：

module.exports = {
  devServer: {
   //注意：这个地址是请求的服务器地址
    proxy: 'http://localhost:4000' 
  }
}

 

这会告诉开发服务器将任何未知请求 (没有匹配到静态文件的请求) 代理到http://localhost:4000。

b.方式二(更常用)：

如果你想要更多的代理控制行为，也可以使用一个 path: options 成对的对象。

module.exports = {
  devServer: {
    proxy: {
     //  '/api' 是请求前缀
      '/api': {
        target: 'http://localhost:4000',
      //路径重定向
        pathRewrite：{'^/api':''}
       //用于支持websocket
        ws: true,
       //flase代理服务器向服务器撒谎  true就是不撒谎 用于控制请求头中的host值
        changeOrigin: true
      },
      '/foo': {
        target: '<other_url>'
      }
    }
  }
}



//浏览器axios的请求方式为
axios.get('http://localhost:8080/api/student/a')

注意:设置了代理服务器后，浏览器发axios请求的地址就是 代理服务器的地址，也就是浏览器的地址