前端中的跨域问题

前端跨域处理

如果后台使用了CORS则不需要往后看了。如果前端解决跨域，那么默认情况下，前端接口请求的是http://localhost:8080

开发环境

利用vue.config.js中的devServer配置，在这里配置proxy
在根目录中创建vue.config.js文件

module.exports = {
  devServer: {
    proxy: "http://localhost:3000"
  }
}

如果在一个项目中使用了多个后台，那么需要以下配置，配置前需要和后台进行沟通，把不同的接口前缀设置成不一样的

module.exports = {
  devServer: {
    proxy: {
      '/前缀1': {
        target: '要跨域的url'
      },
      '/前缀2': {
        target: '要跨域的url'
      }
    }
  }
}

生产环境

找到服务器中的nginx安装位置（问后台，需要有服务器的用户名和密码），找到配置文件nginx.conf
我们只需要配置server即可

server {
  listen 80;
  server_name localhost;

  # 配置我们对应的vue项目的根目录
  location / {
    root   html;
    index  index.html index.htm;
  }

  # 如果使用history模式，则按照下面的配置进行配置
  location / {
    root   html;
    try_files $uri $uri/ /index.html;
  }
  

  # 配置跨域代理的

  # 前端可以和后台沟通，添加同意的前缀 /api 或者其他的统一前缀
  location /api {
    proxy_pass http://localhost:3000;
  } 

  # 如果需要多个后台地址的跨域
  location /其他前缀 {
    proxy_pass 要代理的地址;
  }
}

build之后，把dist目录中的文件，放在nginx服务器所配置的服务器根目录中（默认是html），然后打开服务，访问http://localhost，可以访问到内容，但是接口不通，按照上面的方式进行配置，可以实现对应的跨域操作