前后端分离如何解决跨域问题

现在前后端分离开发很常见了，由于浏览器的同源策略，存在跨域问题

F12 报错：

No 'Access-Control-Allow-Origin' header is present on the requested resource

服务端你会发现 request.Method是OPTIONS，而且会请求2次，第一次是尝试

解决跨域方案有好几种，这里介绍反向代理解决方案，尽量对代码不修改

前端代码：

    build: {
      vueRouterMode: 'hash', // available values: 'hash', 'history'
      env: {
        API_HOST: ctx.dev
          ? 'http://localhost:8080/api'
          : 'http://110.84.154.142:8030/api'
      },

 

反向代理用
1. webpack dev-serve

https://www.webpackjs.com/configuration/dev-server/#devserver-proxy

 devServer: {
      https: false,
      port: 8080,
      open: false, 
      compress: true,
      proxy: {
        '/api': {
          target: 'http://localhost:8082',
          changeOrigin: true
        }
      }
    },

注意上面是请求到 localhost:8082/api/* 下,如果不要api，加 pathRewrite: { '^/api': '' }

原理： 浏览器访问 localhost:8080/login，输入账户后登陆（/user/login），

此时url变成访问 http://localhost:8080/api/user/login，dev-server proxy后，

跳转 http://localhost:8082/api/user/login访问后台

这样前端 localhost:8080 和 后端 localhost:8082 实现跨域访问了。

 

反向代理，也可以选择用

2. nginx

前端代码

    build: {
      vueRouterMode: 'hash', // available values: 'hash', 'history'
      env: {
        API_HOST: ctx.dev
          ? 'http://localhost:8030/api'
          : 'http://110.84.154.142:8030/api'
      },

 devServer: {
      https: false,
      port: 8080,
      open: false, 
      compress: true
    },

nginx.conf

server{
	listen: 8030                                                  
	server_name: localhost                                    
	
	
	location /api {                      #所有/api的请求都转发到后台
			proxy_pass  http://localhost:8082;               
	}

	location / {                   #监听nginx 8030端口,所有请求都转发到前端的8080
			proxy_pass  http://localhost:8080;               
	}

}

原理： 浏览器访问 localhost:8030/login 打到了nginx，跳转到了http://localhost:8080/login ,输入账户后登陆（/user/login），

此时url变成访问 http://localhost:8030/api/user/login，nginx proxy后，

跳转 http://localhost:8082/api/user/login访问后台

这样前端 localhost:8080 和 后端 localhost:8082 实现跨域访问了。