2020-09-27跨域问题

本次在vue中发送请求，使用ngix搭建部署服务

前后端分离中跨域问题（部分）

	开发环境	生产环境
后台主导	CORS	CORS
前端主导	proxy代理	nginx代理

1、使用后台配置CORS

在开发环境和生产环境中，针对不同环境访问不同接口时，需要进行相关文件配置，前端在发送axios请求时，需要配置baseURL，前提需要配置好.env环境文件。

.env.development(开发环境文件)

    VUE_APP_BASEURL=http://开发环境接口地址

.env.production(生产环境文件)

    VUE_APP_BASEURL=http://生产环境接口地址

再配置axios设置baseUrl

    const _axios = axios.create({
        baseURL:process.env.VUE_APP_BASEURL
    })

2、使用服务器代理 proxy

• 原理：通过配置相关文件，在请求发送之前加入中间层，将不同的域名转换成相同的就解决跨域的问题

2.1 开发环境中配置

（1）、一个后台情况下，在vue.config.js中配置如下

    module.exports = {
        devServer: {
            proxy: "http://开发环境后台地址",
        }
}

则请求发送如下即可:

     axios.get('http://localhost:8081/test').then(res=>{
      console.log(res.data)
    }) 
}

（2）、多个后台情况下，在vue.config.js中配置如下
假设访问后台地址：http:localhost:4000/api02/test

• api02 既是后台真实前缀
• test

  module.exports = {
  devServer: {
    proxy: {
      "/自定义前端请求时前缀/": {
        target: "http://开发环境后台地址",
        pathRewrite: {
          "^/自定义前端请求时前缀": "/后台真实前缀"
        }
      }
    }
  }
}

则请求发送如下即可:

     axios.get('/自定义前端请求时前缀/test').then(res=>{
      console.log(res.data)
    })

注意：如果使用了服务器代理，则前端中不需要配置baseURL，这是因为所有的请求走的都是前端服务（代理）。因此，在发送请求时直接写接口名即可 '/xxx'。

2.1 生产环境中配置

build之后，不再有nodejs服务器，只是静态页面（proxy设置只能针对开发环境）

生产环境需要配置nginx

server {
  listen       80;
  server_name  localhost;

  #charset koi8-r;

  #access_log  logs/host.access.log  main;

  location / {
    root   html;

    # 只能有一个
    # 没有使用history 
    index  index.html index.htm;

    # 使用了history
    try_files $uri $uri/ /index.html;

  }

  # 配置代理
  location /服务器前缀 {
    proxy_pass http://要代理的服务器地址（生产服务器地址）;
  }

  # 配置代理 需要进行rewrite
  location /前端请求的前缀 {
    rewrite  ^/前端请求前缀/(.*)$ /后台接口真实前缀/$1 break;
    proxy_pass http://要代理的服务器地址（生产服务器地址）;
  }
  
  error_page   500 502 503 504  /50x.html;
  location = /50x.html {
      root   html;
  }
}

注意：在nginx的nginx.conf配置文件书写代码时，注意规范，格式不正确导致软件打不开（已入坑）