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

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

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 实现跨域访问了。

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值