E2E测试时跨域问题的解决办法

• 使用谷歌浏览器进行E2E测试时：

  • 方法1:

    找到protractor.conf.js配置文件

    配置浏览器属性(禁用谷歌同源策略)：

    capabilities: {
        'browserName': 'chrome',
        'chromeOptions':  {
          'args': ['--disable-web-security','--user-data-dir=C:/Data']
        }
      },
    

    其中--user-data-dir的值可以自定义指定。

    其余配置可参照

    https://blog.51cto.com/7308310/2325925

  • 方法2(推荐):

    创建proxy.conf.json配置文件,配置代理

    举例：angular运行在localhost:4200,需要访问地址在localhost:8080的api,api的url为localhost:8080/api/user/,那么配置如下即可(angular代码中的url常量就不需要添加主机地址localhost:8080了,直接使用api/user/即可):

    {
        "/api/*": {  // 要访问的api的url
            "target": "http://localhost:8080", // 要访问的后台服务的主机地址
            "secure": false,
            "loglevel": "debug",
            "changeOrigin": true
       }
    }
    

    找到工程中的angular.json配置文件

    配置跨域策略属性:

    {
        "projects": {
            ...
            ...
            "project-name": {
                "architect": {
                    "build": {
                        "configurations": {
                        "production": { ... },
                         
                        }
                    },
                    "serve": {
                        "builder": ...,
                        "options": {
                                "browserTarget": ...,
                                "proxyConfig": "proxy.conf.json" // 添加
                        }
                    }
                }
            }
        }
    }
    

    配置完成之后，启动e2e测试即可解决跨域问题

• 使用IE浏览器进行E2E测试时:

  • 方法同谷歌配置的方法2,只需要在es5配置中添加"proxyConfig": "proxy.conf.json"即可:

    {
        "projects": {
            ...
            ...
            "project-name": {
                "architect": {
                    "build": {
                        "configurations": {
                        "production": { ... },
                         
                        }
                    },
                    "serve": {
                        "builder": ...,
                        "options": {
                                "browserTarget": ...,
                                "proxyConfig": "proxy.conf.json" 
                        },
                        // 添加
                        "es5": {
                                 "browserTarget": "mainpage:build:es5",
                                 "proxyConfig": "proxy.conf.json" 
                        }
                    }
                }
            }
        }
    }
    

    配置完成后启动即可。