反向代理解决跨域问题

解决跨域问题

1.同源策略

选区_001.png

第一，如果是协议和端口造成的跨域问题“前台”是无能为力的，
第二：在跨域问题上，域仅仅是通过“URL的首部”来识别而不会去尝试判断相同的ip地址对应着两个域或两个域是否在同一个ip上。

“URL的首部”指window.location.protocol +window.location.host，也可以理解为“Domains, protocols and ports must match”。

这里提供了一些解决方法

JChen博客

在我自己开发的项目中，由于是前后端分离的 API在weafung的服务器上，本地调试的时候就会产生跨域问题(vue-cli脚手架载体是express)
在本地上浏览器的域名是localhost:8081 端口和域名都不一样就产生了跨域问题。本地的解决办法是由于express使用了一个叫http-proxy-middleware的中间件这个中间件是node的代理模块。如果是使用vue-cli脚手架的话，只要在config/index.js 中

dev: {
  env: require('./dev.env'),
  port: 8081,
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  proxyTable: {
      '/index.php': {
          target: 'http://api.example.com',
          changeOrigin: true,
          pathRewrite: {
              '^/index.php': '/index.php'
          }
      }
  },

这样之后就把所有 http://localhost:8081/index.php/的API转成 http://api.example.com/index.php/ 跨域问题就解决了。

那么在website的服务器上，我使用的是SSL，所以跨域的原因是不同域名不同协议。web服务使用的nginx 只要在conf文件加上

1
2
3

location ^~ /index.php/ {
    proxy_pass http://api.example.com   
}

这样也就解决的跨域问题。原理大概都是一样的。

反向代理反向代理（Reverse Proxy）方式是指以代理服务器来接受internet上的连接请求，然后将请求转发给内部网络上的服务器，并将从服务器上得到的结果返回给internet上请求连接的客户端，此时代理服务器对外就表现为一个反向代理服务器。

相当于把服务器端的API代理到本地服务器上，然后website使用的是本地的API 这样就解决掉了跨域的问题。。。

以上观点仅供参考。。

解决跨域问题

CATALOG

FEATURED TAGS

FRIENDS