作者:颜亦浠@毛豆前端

本地开发过程中,最常遇到的就是出现跨域,无法请求的问题。如何解决在开发中遇到的跨域问题,今天整理了4种解决方法,供大家参考。

一、何为跨域

跨域出于浏览器的同源策略的限制,浏览器本身会限制跨域请求(严格来说,只是限制跨域的读操作)。那么何为跨域呢?非同源请求均为跨域,即:如果两个请求的协议、域名、端口号只要有一个不同,即为非同源即为跨域。

二、常见解决跨域方案

一般多用于本地自测或者前后端开发部署均为分离的情况

1、webpack的proxyTable方案

在一般项目中都会有webpack对应的开发环境的配置文件:webpack.dev.js,在配置项中加入ProxyTable的配置项即可:

proxy: {
          '/api': {
          changeOrigin: true,
          target: 'http://******.*****.com',
    }
}

如果前后端前缀不匹配或者后端前缀不统一的情况,可以增加pathRewrite属性来统一:

proxy: {
            '/EntryApp': {
              changeOrigin: true,
              target: 'http://******.*******.com',
              pathRewrite: {"^/EntryApp": "/EntryApp"}
        },
    }

proxyTable实现跨域可能存在的问题:

1.cookie丢失,接口无法访问

2.post请求报403错

2、Switchhosts工具

SwitchHosts是一个管理、快速切换Hosts小工具,软件开源,可以实现一键切换Hosts配置。SwitchHosts需要管理本机的ip和端口的映射,所以需要以管理员身份运行。

打开SwitchHosts之后,需要在Myhost当中配置对应的映射,当左手边处于打开状态的时候,文件是处于只读的状态,需要编辑的话,就需要让文件处于关闭状态,不同环境还可以分文件配置,直接照下图配置即可:

SwitchHosts使用中可能会遇到的问题:

1.端口号默认为80,如果不是,需要配置上对应的端口号

2.浏览器会有先考虑代理工具的代理。

3、Uuaper

uuaper是百度提供的一款基于nodejs,用于解决前端跨域问题的工具。具体的安装与配置可以去npm官网查找Uuaper,使用中需要结合nodejs,并需要具有自动认证功能:

var express = require('express');
var app = express();
 
var uuaper = require('uuaper');
    app.use('/api', new uuaper({
        target: 'http://xxx.xxx.com/',
        debug: true,
        auth: {
        server: 'http://xxx.baidu.com/login?',
        username: 'xxx',
        password: 'xxx',
    }
}));

4、Nginx

Nginx是一个免费的,开源的高性能的HTTP和反向代理服务器。

通常,线上前后端分开部署时,用nginx比较多。

nginx.conf是主配置文件,有若干个部分组成,每一部分都用{}区分。主要包括:

  • main:nginx的全局配置,对全局生效
  • events:影响nginx服务器或与用户的网络连接
  • http:可以嵌套多个server,配置代理,缓存,日志等
  • server:配置虚拟主机的相关参数,一个http可以有多个server
  • nginx解决跨域的基本方法是在sever中配置proxy_pass:
    // 前端服务的域名为 fe.**.com
    // 后端服务的域名为 dev.**.com
    server {
    listen: 80,
    server_name: fe.**.com,
    location / {
         proxy_pass dev.**.com
    }
    }
    

    根据实际需求,还可以添加一些其他的指令,比如:

  • proxy_connect_timeout:nginx从接受请求至连接到上游服务器的最长等待时间
  • proxy_cookie_domain:替代上游服务器的set_cookie头的domain属性
  • proxy_cookie_path:替代上游服务器的set_cookie头的path
  • proxy_set_header:重写发送到上游服务器头的内容,也可以通过将某个头部的值设置为空字符串,而不发送某个头部的方式发放实现

毛豆前端团队

never stop, always on the way!