angular 跨域的解决方案

方法一:通过修改浏览器参数,使浏览器容许跨域,主要时用于本到开发中,生产中用nginx来解决

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

方法二. 如果服务端没有解决跨域问题,那就通过angular的配置来设置,三步骤:

  1. 在angular的工程目录,和angular.json 同级的目录下面的新建proxy.config.json 文件,内容如下:
{
	"/api": {
		"target": "http://localhost:8080",
		"secure": false
	}
}

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

    return this.http.get(`/api/ctp/trades`);
  1. 配置angular.json文件,在对象key 等于 serve 中的 options 下增加一项
"options": {
    "proxyConfig": "proxy.config.json"
  }
  1. 修改package.json
    "start": "ng serve --proxy-config proxy.config.json",
  1. 重新启动 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>Documenttitle>
head>
<body>

<button id="button">ajax requestbutton>

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>Documenttitle>
head>
<body>

<button id="button">ajax requestbutton>

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;      
        }

我们看最后面的三行,具体的意思就是:当我们访问地址http://localhost/api/的时候,其实访问的是:http://localhost:8080的这个地址,通过这么一层转换,浏览器就不会报跨域错误的问题了

你可能感兴趣的:(#,Angular,angular.js,javascript,前端)