angular 跨域的解决方案

book_longker

已于 2023-08-22 20:39:28 修改

阅读量8.3k

点赞数 4

分类专栏： # Angular 文章标签： angular.js javascript 前端

于 2020-11-24 10:35:34 首次发布

本文链接：https://blog.csdn.net/book_longker/article/details/110039537

版权

Angular 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

本文详细介绍了Angular应用中的跨域问题解决方法，包括修改浏览器参数、配置Angular的proxy.config.json以及在生产环境通过nginx设置反向代理。实例演示了如何避免本地开发与实际部署中的跨域挑战。

摘要由CSDN通过智能技术生成

方法一：修改浏览器参数

使浏览器容许跨域，主要时用于本到开发中，生产中用nginx来解决

在chrome浏览器的快捷方式中选择右键属性，在目标选项哪里修改为如下：
"C:\Program Files\Google\Chrome\Application\chrome.exe" --args --disable-web-security --user-data-dir=C:\Program Files\Google\Chrome\Application\
从新打开chrome浏览器，会有的安全问题提示

方法二： angular的配置解决跨域(本地开发中使用)

在angular的工程目录，和angular.json 同级的目录下面的新建proxy.config.json 文件，内容如下：

{
	"/api": {
		"target": "http://localhost:8080",
		"secure": false
	}
}

说明：当我们访问angular的web服务地址：http://localhost:4200/api的时候，其实就相等于访问http://localhost:8080的地址；如下，在angular的服务中配置地址，其实就是访问http://localhost:8080/ctp/trades

    return this.http.get(`/api/ctp/trades`);

配置angular.json文件，在对象key 等于 serve 中的 options 下增加一项

"options": {
    "proxyConfig": "proxy.config.json"
  }

修改package.json, 使上面的配置启动生效

    "start": "ng serve --proxy-config proxy.config.json",

重新启动 npm start

方法三：通过nginx来设置反向代理解决跨域(生产环境中使用)

架设环境，实现的需求，及解决的办法

架设环境: nginx提供http服务，同时提供反向代理
实现的需求：我们在做前后端分离的应用，就必须去解决浏览器的跨域问题，主要是前端如(angular,vue…)访问后端的时候，就会产生跨域的情况
解决办法：通过nginx来实现

举例：

我们来看一个最简单的跨域请求, 默认时通过nginx来提供http服务，在根路径下面有个ajax.html, 通过 `http://localhost/ajax.html可以访问到，html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <title>Document</title>
</head>
<body>

<button id="button">ajax request</button>

</body>
<script type="text/javascript">
$("button").click(function (){
    let url
    url = "http://localhost:8080/api/admin/users"
    $.get(url, function (result) {
        console.log(result)
    })
    console.log("clicked")
})
</script>
</html>

假如当你在浏览器访问:http://localhost/ajax.html，然后点击请求按钮的时候, 就是访问http://localhost:8080的后端，服务器相同，端口不同，就会出现跨域请求错误的问题；那怎么解决呢？
通过nginx来解决，我们不要直接在上面代码url地址写url = "http://localhost:8080/api/admin/users", 把它改成url = "http://localhost/api/admin/users" 或者 /api/admin/users，改完之后，正确的代码为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <title>Document</title>
</head>
<body>

<button id="button">ajax request</button>

</body>
<script type="text/javascript">
$("button").click(function (){
    let url = "/api/admin/users"
    $.get(url, function (result) {
        console.log(result)
    })
    console.log("clicked")
})
</script>
</html>

我们在到nginx的配置文件nginx.conf 中，修改server字段的某些东西

    server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root D:\web\
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
			# proxy_pass http://MyServers;
        }
		
        location /api/ {
            proxy_pass http://localhost:8080;      
        }